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

我假设您正在使用布尔玛。因此，您需要包括他们的样式表才能使事情正常工作。最简单的方法是仅use a CDN。因此，您需要将此行添加到+标记中或head div之前的某个位置。

app

例如，..

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

查看此JSFiddle

Answer 2

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

模态窗口不显示

2 个答案: