Question

我有一个vue.js单个文件组件，其中包含一个按钮，可以打开带有视频的zurb foundation模式。当我单击按钮时，它会重新加载页面。它在开发工具控制台或网络部分中不显示任何错误。这是我的代码：home.vue

<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>

url是正确的，甚至可以拨打youtube。

Answer 1

你可以更完整地粘贴你的代码，我们很难用一段代码来帮助你。但至少你应该做这样的事情。

in html file:

<a @click="popup()">WATCH VIDEO</a>
<div id="video"></div>

in vue file:

methods: {
    popup() {

        $('#video').foundation('open');
    }
}

Answer 2

你需要删除href =＆＃34;＆＃34;来自A标签的属性：

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

Answer 3

将vue与js插件集成在一起存在问题，因此请使用指令。用于任何jquery插件和Zurb Foundation js插件。解释here

Answer 4

Foundation 根据您的 <div class="reveal" id="someModal" data-reveal> 创建一个新元素。这个新元素是您通常看到的实际叠加层。加载 Foundation 脚本后调用 $(document).foundation(); 时会创建叠加层。

调用 data-reveal 时，您的模态（初始 foundation() 元素）不在视图中，因此不会创建叠加层。

您可以通过添加以下内容在您的组件中再次初始化 Foundation：

  mounted() {
    $(document).foundation();
  }

这将再次初始化 Foundation，这一次会看到您的数据显示，因此会创建覆盖层。

Foundation 6模式在vue.js组件中不起作用

4 个答案: