.vue单文件组件中使用的基础问题
.vue单文件组件中使用的基础问题
提问于 2016-12-16 07:31:33
我已经意识到在.vue单文件组件中使用.vue单文件组件类存在一个问题。起初，我无法让揭示模态在.vue component中工作，但是当我在blade或html文件中使用相同的代码时，它就可以工作了。然后，我注意到了一个模式，因为当我试图在组件中使用地基轨道时，它失败了，起初我认为它是一个错误，但是后来我在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">×</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>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-12-19 07:52:27
在与vue components一起使用foundation js components时存在一个问题，这就是为什么它们没有显示为解释的这里
因此，我在脚本标记中添加了这个指令：
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>我希望这能帮助被困的人。
Stack Overflow用户
发布于 2018-09-05 14:57:00
菲利斯上面的回答是绝对正确的。我只是想再举一个例子，Foundation 6.4 dropdown-menu和Vue.js 2。
创建名为dropdown的自定义指令，并将v-dropdown添加到父元素中，它应该可以工作。
<ul class="dropdown menu" v-dropdown>
<li>
<a href="#">Navigate Site <i class="fas fa-chevron-down"></i></a>
<ul class="menu vertical">
<li><a href="/auto"><i class="far fa-car"></i> Auto</a></li>
<li><a href="/residential"><i class="far fa-home"></i> Residential</a></li>
<li><a href="/commercial"><i class="far fa-building"></i> Commercial</a></li>
<li><a href="/safety-security"><i class="far fa-building"></i> Safety & Security</a></li>
<li><a href="/specialty-solutions"><i class="far fa-gem"></i> Specialty Solutions</a></li>
<li><a href="/dealers"><i class="fal fa-id-badge"></i></i> Dealers</a></li>
<li><a href="/madicou"><i class="far fa-building"></i> Madico U</a></li>
<li><a href="/about"><i class="far fa-building"></i> Company</a></li>
</ul>
</li>
</ul>
Vue.directive('dropdown', {
bind: function (el) {
new Foundation.DropdownMenu($(el));
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41179327
复制相关文章
相似问题
腾讯云开发者
