Question

我正在尝试以自举模式打开一个简单的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"的引用，并删除v-modal，例如：

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

在methods中创建方法showModal

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

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

在B模式VueJS中打开jQuery Fancybox

1 个答案: