我发现使用时有问题祖布基金会 http://foundation.zurb.com班级在.vue 单文件组件 https://v2.vuejs.org/v2/guide/single-file-components.html。起初我无法得到显示模态 http://foundation.zurb.com/sites/docs/reveal.html在里面工作.vue component
但当我在一个中使用相同的代码时它就起作用了blade
or html
文件。然后我注意到一个模式,因为当我尝试使用基金会的轨道 https://foundation.zurb.com/sites/docs/orbit.html在组件内部它失败了,起初我认为这是一个错误,但后来我在blade
文件并且它起作用了。其他基础课程,例如row
, grid
and 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">×</span>
</button>
</div>
<div class="flex-video">
<iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
</div>
</div>
对于轨道,我使用基础文档中的基本示例进行测试。
<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>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</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>
使用时出现问题vue components
with foundation js components
这就是为什么他们没有按照解释显示here https://forum.vuejs.org/t/vue2-webpack-foundation6-integration/170
所以我在我的脚本标签中添加了这个指令:
Vue.directive('f-orbit', {
bind: function (el) {
new Foundation.Orbit($(el))
},
unbind: function (el) {
$(el).foundation.destroy()
}
})
在我的模板中我添加了v-f-orbit
而不是默认的data-orbit
:
<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>
我希望这能帮助那些陷入困境的人。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)