Question

点击链接后，我想打开一个模式：

 <a @click="showEditModalFunc()" href="#">Edit Post</a>

方法：

  showEditModalFunc() {
    console.log('showEditModal value is' , this.showEditModal);
     this.showEditModal=!this.showEditModal;
  },

模式本身：

<div v-if="showEditModal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
    Lorem, ipsum dolor sit amet  
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

这应该很简单，但是模态不会显示！

我也没有任何错误。我可以在控制台showEditModal value is true中看到。

模态正在使用bulma.css。奇怪的是，我在组件上使用模版bootstrap.css时编写的同一组件上还有另一个模态。该模式工作正常。

我想知道这里可能有什么问题吗？以及如何解决？

Answer 1

根据bulma.css文档：

要激活模式，只需在.modal容器上添加is-active修饰符

因此，您可以像这样使用类绑定：

<div v-bind:class="{ 'is-active': showEditModal }" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
    Lorem, ipsum dolor sit amet  
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

Answer 2

任务：

要激活模态，需要将 is-active 类添加到 modal 类容器中。

要停用模态，需要从 is-active 类容器中删除 modal 类。

如何用Vue.js完成任务

使用 v-bind: 指令在 is-active 类容器上添加 modal 类以对其进行被动更新。
创建一个函数，当点击按钮时，该函数将切换（添加和删除）is-active 类容器上的 modal 类。
在 开始按钮 上添加一个点击事件，这将触发 'is-active class toggling function' 并打开模式。
在 modal-close 类容器上添加相同的点击事件，该事件将触发“is-active class toggling function'”以关闭模式。

 <div id="app">
        <button class="button  
        has-text-white has-background-primary-dark
        m-6" @click="modal">
           Click me to see the Modal
        </button>
        <div class="modal" :class=" {'is-active': toggleModal } ">
            <div class="modal-background"></div>
            <div class="modal-content">
                <div class="is-size-1 has-background-info-light has-text-info-dark
                has-text-centered mr-6 ">
                    Hi! I am your Modal. Have a nice day & please close me now, I want to sleep!
                </div>
            </div>
            <button class="modal-close is-large" @click="modal"></button>
        </div>
    </div>

const hello =  ({
    data() {
        return {
            toggleModal: false
        }
    },
    methods: {
         modal() {
            this.toggleModal = !this.toggleModal
        }
    },
})

Vue.createApp(hello).mount('#app')

<块引用>

“检查我的 Vue+Bulma Github 存储库以找到更多带有 Vue.js + 描述的 Bulma 组件。”

Link

Vue.js布尔模式不显示

2 个答案:

任务：

如何用Vue.js完成任务