没有显示模态窗口。

Question

如本例所示，我正在尝试显示一个模态窗口。https://codepen.io/anon/pen/dgRKEP?editors=1010，但由于某种原因，没有显示模态窗口。

  <div id="app6">
        <div class="has-text-centered">
            <button class="button is-success" @click="showModal = true">
                show modal!
            </button>
        </div>
        <modal title="Title of the modal" v-show="showModal" @close="showModal = false">
            <div class="content">
                is modal!
            </div>
        </modal>

</div>

剧本：

Vue.component('modal', {
  template: `
    <div class="modal is-active">
      <div class="modal-background"></div>
      <div class="modal-content">
        <div class="box"><slot></slot></div>
      </div>
      <button class="modal-close" @click="$emit('close')"></button>
    </div>
  `
});

 new Vue({
        el: '#app6',
        data:{
          ...
            showModal: true
   ...
        },

Answer 1

我假设你在使用Bulma。因此，您需要包含它们的样式表才能正常工作。最简单的方法是只使用使用CDN。因此，您需要在head标记中或在app div之前的某个地方包括这一行。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

比如这样..。

​

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

<div id="app">
  <div id="app" class="container">

    <div class="has-text-centered">
      <button class="button is-success" @click="showModal = true">
        Покажите мне всплывашечку!
      </button>
    </div>

    <modal title="Title of the modal" v-show="showModal" @close="showModal = false">
      <div class="content">

      </div>
    </modal>
  </div>
</div>

参见此JSFiddle

Answer 2

您需要添加css。您可以添加自己的css，也可以使用代码笔示例：https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css中使用的库。单击css设置按钮，您将找到导入的库。