在b-modal VueJS中打开jquery Fancybox

Question

我试图在bootstrap模式中打开一个简单的fancybox。当我只打开简单的fancybox：

<a class="fancybox" href="http://samplepdf.com/sample.pdf">Open pdf</a>
$(".fancybox").fancybox({
  width  : 600,
  height : 300,
  type   :'iframe'
});

这样做很好，我的PDF显示在灯箱里。 当我尝试将我的fancybox放入b模式时：

<b-modal
  v-model="modalShow"
  @ok="submit">
  <div class="mb-3">
    <a
      class="fancybox"
      href="http://www.africau.edu/images/default/sample.pdf">
      Open
    </a>
  </div>
</b-modal>

当我点击“打开”时，我的PDF将在一个新页面中打开，就像一个简单的链接href。我想打开fancybox并在我的模态中显示我的PDF。一些想法？谢谢

Answer 1

正如@Janis所说，fancybox可能会在找到链接之前执行。一种解决方法是使用方法打开b-modal并在那里执行fancybox。

所以给你的模态一个像ref="myModal"的ref并删除v-modal，如：

   <b-modal ref="myModal" > 
   </b-modal>

在methods中创建方法showModal

在showModal函数内部编写以下代码

 methods:{
   showModal:function(){
     this.$refs.myModal.show();
     $(".fancybox").fancybox({
      width  : 900,
      height : 450
     });
   }
 }