.vue 单文件组件中使用的基础问题 [英] Issue with foundation used in .vue single file components

问题描述

我意识到在 .vue 单文件组件.起初我无法让 Reveal Modal 在 中工作.vue 组件 但是当我在 blade 或 html 文件中使用相同的代码时它可以工作.然后我注意到一个模式，因为当我尝试使用 Foundation's Orbit组件它失败了，起初我认为这是一个错误，但后来我在 blade 文件中使用了相同的代码并且它起作用了.其他基础类，例如 row、grid 和 buttons 工作正常.

有人遇到过同样的问题吗?我该如何解决?

这是模态的代码:

<a data-open="video" class="button warning" href="">WATCH VIDEO</a><div id="video" class="reveal" data-reveal><div class="lead"><button class="close-button" data-close aria-label="Close modal" type="button"><span aria-hidden="true">&times;</span>

<div class="flex-video"><iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>

对于轨道，我使用了基础文档中的基本示例进行测试.

 
<ul class="orbit-container"><button class="orbit-previous"><span class="show-for-sr">上一张幻灯片</span>&#9664;&#xFE0E;</button><button class="orbit-next"><span class="show-for-sr">下一张幻灯片</span>&#9654;&#xFE0E;</button><li class="is-active track-slide"><img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space"><figcaption class="orbit-caption">空间，最后的边界.</figcaption><li class="orbit-slide"><img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space"><figcaption class="orbit-caption">发射火箭！</figcaption><li class="orbit-slide"><img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space"><figcaption class="orbit-caption">封装</figcaption><li class="orbit-slide"><img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space"><figcaption class="orbit-caption">离开这个世界</figcaption><nav class="orbit-bullets"><button class="is-active" data-slide="0"><span class="show-for-sr">第一张幻灯片详情.</span><span class="show-for-sr">当前幻灯片</span></button><button data-slide="1"><span class="show-for-sr">第二张幻灯片详情.</span></button><button data-slide="2"><span class="show-for-sr">第三张幻灯片详情.</span></button><button data-slide="3"><span class="show-for-sr">第四张幻灯片详情.</span></button></nav>

解决方案

使用 vue components 和 foundation js components 时出现问题，这就是为什么它们没有显示如此处

所述

所以我在脚本标签中添加了这个指令:

Vue.directive('f-orbit', {绑定:函数(el){新 Foundation.Orbit($(el))},解除绑定:函数(el){$(el).foundation.destroy()}})

在我的模板中，我添加了 v-f-orbit 而不是默认的 data-orbit:

我希望这能帮助被卡住的人.

I have realised that there is a problem when using Zurb Foundation classes in .vue single file components. At first I could not get a Reveal Modal to work inside the .vue component but it was working when I use the same code in a blade or html file. Then I noticed a pattern because when I tried to use the Foundation's Orbit inside the component it failed, at first I thought it was an error but then I used the same code in a blade file and it worked. Other foundation classes such as row, grid and buttons are working just fine.

Has anyone experienced the same issue? And how can I work around it?

Here is the code for the modal:

<a data-open="video" class="button warning" href="">WATCH VIDEO</a>

<div id="video" class="reveal" data-reveal>
    <div class="lead">
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="flex-video">
        <iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

And for the orbit I used the basic example in the foundation docs for testing.

    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    <li class="is-active orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
      <figcaption class="orbit-caption">Lets Rocket!</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
      <figcaption class="orbit-caption">Encapsulating</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
      <figcaption class="orbit-caption">Outta This World</figcaption>
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>

解决方案

There is an issue when using vue components with foundation js components and that's why they are not showing as explained here

So I added this directive in my script tag:

Vue.directive('f-orbit', {
    bind: function (el) {
        new Foundation.Orbit($(el))
    },
    unbind: function (el) {
        $(el).foundation.destroy()
    }
})

And in my template I added v-f-orbit instead of the default data-orbit:

<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>

I hope this will assist someone who is stuck.

这篇关于.vue 单文件组件中使用的基础问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！