3

我正在构建一个需要对多个 bootstrap-vue 模态进行排序的应用程序。具体来说，嵌套组件中的按钮应打开“管理”模式。“管理”模式包含按钮，单击时应关闭“管理”模式并打开另一个模式（例如“编辑”、“添加”、“完成”等）。

我不想向上和向下传递道具/发射事件以便可以从不同的嵌套组件触发这些事件，我希望在我的商店中有一个值this.$store.state.general.activeModal，它决定显示哪个模式（如果有）

问题：如何在我的主应用程序页面中创建一组模式，以在状态值发生更改时呈现？

我的主应用程序将如下所示：

<template>
   <app-stuff />
   <b-modal id="modal1" />
   <b-modal id="modal2" />
   <b-modal id="modal3" />
</template>

例如，modal1 应该在this.$store.state.general.activeModal设置为“modal1”时显示，并在值更改为其他值时关闭。

我尝试创建一个计算变量“showModal1”，它在何时为真store.etc.activeModal=='modal1'，否则为假，然后v-modal="showModal1"用于显示/隐藏模态，但每次商店中的值匹配时，它最终都会创建模态的两个副本（显然计算值触发当存储中的值更改时两次？）

任何帮助都会很棒！

4

3 回答 3

4

您可以为每个模态的可见性创建一个计算属性，例如：

computed: {
  modal1Visible() {
    return this.$store.state.activeModal === 'modal1';
  }
}

然后设置visibleb-modal的属性：

<b-modal :visible="modal1Visible" id="modal1">

要处理关闭模式，您可以将hide事件与设置值的存储操作或突变结合使用this.$store.state.activeModal，例如：

<b-modal :visible="modal1Visible"
         @hide="$store.commit('activeModalSet', null)"
         id="modal1"
</b-modal>

这意味着如果您通过v-b-modal指令、关闭按钮或其他方法关闭模式：

  1. 模态将发出一个hide事件
  2. 将activeModalSet触发突变，设置this.$store.activeModal为null
  3. 计算的modal1Visible属性现在将评估为false
  4. modal的visible属性将为 false，因此 modal 将被隐藏。
于 2018-09-29T05:58:23.883 回答
0

我建议您使用b-modal组件的方法： .show() 和 .hide() 在观察者中，这将捕获您的状态突变：

<template>
    <div>
        <b-modal ref="modal1" id="modal1"></b-modal>
        <b-modal ref="modal2" id="modal2"></b-modal>
        <b-modal ref="modal3" id="modal3"></b-modal>
    </div>
</template>

不要关注 mapGetters，你必须注意你的商店 getters/state。这里假设 activeModal 是你的状态值。

computed : {
    ...mapGetters([
        'activeModal'
    ])
},
watch : {
    activeModal(newActiveModal, oldActiveModal) {
        // If an old value was setted, we want to hide it in anyway.
        if (oldActiveModal) this.$refs[oldActiveModal].hide()
        // If the new value is falsy, do nothing
        if (!newActiveModal) return

        this.$refs[newActiveModal].show()
    }

}
于 2018-03-22T13:36:32.770 回答
0

虽然不是 bootstrap-vue，但我们已经通过简单的v-if指令成功地使用了 Bootstrap Modals。模态仅在条件为真时显示/渲染。

使用 Vuex，您可以为 activeModal 提供一个计算属性，并为v-if="activeModal == 'modalName'". 在我们的模态中，我们使用 Vue 生命周期mounted来显示我们的模态，并注册一个发射（bootstrap-vue 可能会以不同的方式处理......）

$('#' + this.modalId).on('hide.bs.modal', () => { this.$emit('closeModal') //this would set the v-if in parent Component to false, un-rendering the modal component })

于 2018-03-22T17:34:44.017 回答