Question

我创建了三个简单的按钮，它们将触发三个不同的引导程序模式对话框。模态对话框为“添加产品” ，“编辑产品” 和“删除产品” 。添加和编辑模式对话框均包含带有两个输入元素的表单，而删除模式对话框则包含简单文本。我意识到我的代码变得非常凌乱并且难以维护。因此，我有以下问题：

1）如何重用模式对话框，而不是创建3个单独的对话框？

2）我如何知道已触发哪个模式对话框？

更新：我开发了一种引人入胜的方法，其中将包含条件语句，例如v-if，v-else-if和v-else ，以跟踪用户单击哪个按钮。但是，我仍然觉得有一个更好的解决方案。有人可以帮我吗？

下面是我当前的代码：

       <template>
  <div>
    <b-button v-b-modal.product class="px-4" variant="primary" @click="addCalled()">Add</b-button>
    <b-button v-b-modal.product class="px-4" variant="primary" @click="editCalled()">Edit</b-button>
    <b-button v-b-modal.product class="px-4" variant="primary" @click="deleteCalled()">Delete</b-button>

    <!-- Modal Dialog for Add Product -->
    <b-modal id="product" title="Add Product">
      <div v-if="addDialog">
        <form @submit.stop.prevent="submitAdd">
          <b-form-group id="nameValue" label-cols-sm="3" label="Name" label-for="input-horizontal">
            <b-form-input id="nameValue"></b-form-input>
          </b-form-group>
        </form>

        <b-form-group id="quantity" label-cols-sm="3" label="Quantity" label-for="input-horizontal">
          <b-form-input id="quantity"></b-form-input>
        </b-form-group>
      </div>

      <div v-else-if="editDialog">
        <form @submit.stop.prevent="submitEdit">
          <b-form-group id="nameValue" label-cols-sm="3" label="Name" label-for="input-horizontal">
            <b-form-input id="nameValue" :value="productName"></b-form-input>
          </b-form-group>
        </form>

        <b-form-group id="quantity" label-cols-sm="3" label="Quantity" label-for="input-horizontal">
          <b-form-input id="quantity" :value="productQuantity">5</b-form-input>
        </b-form-group>
      </div>

      <div v-else>
        <p class="my-4">Are You Sure you want to delete product?</p>
      </div>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: "T-Shirt",
      productQuantity: 10,
      addDialog: false,
      editDialog: false,
      deleteDialog: false
    };
  },
  methods: {
    addCalled() {
      this.addDialog = true;
    },
    editCalled() {
      this.editDialog = true;
      this.addDialog = false;
      this.deleteDialog = false;
    },
    deleteCalled() {
      this.deleteDialog = true;
      this.addDialog = false;
      this.editDialog = false;
    }
  }
};
</script>

<style>
</style>

Answer 1

更新

现在，您可能会想如何关闭模态并让父组件知道它。单击按钮触发器closeModal

创建一个方法-closeModal，并在commonModal组件内部，并emit一个事件。

closeModal() { 
  this.$emit('close-modal')
}

现在，这将发出一个自定义事件，使用方组件可以监听该事件。

因此，在您的父组件中，只需使用以下自定义事件即可，如下所示，然后关闭模式

<main class="foo">
  <commonModal v-show="isVisible" :data="data" @close- modal="isVisible = false"/>
  <!-- Your further code -->
</main>

根据您的问题

A-如何重用模式对话框，而不是创建3个单独的对话框

制作一个单独的modal组件，比方说-commonModal.vue。

现在在您的commonModal.vue中，接受单个prop，再说data: {}。

现在在html的{{1}}部分中

commonModal

现在将<div class="modal">  <your modal code /> </div>导入到消费/父组件。在父组件中创建数据属性，假设-commonModal，并且要在isVisible: false中显示的data的计算属性，使modal。

现在像这样使用它

modalContent

以上内容将帮助您重用模式，而您只需要从父组件发送<main class="foo"> <commonModal v-show="isVisible" :data="data" />  </main>。

现在第二个问题也将在这里得到解决。我怎么知道触发了哪个模态对话框？

只需验证data属性即可检查isVisible是否打开。如果modal，则您的模态不可见，反之亦然

Answer 2

如前所述，我将使用插槽和动态组件渲染来以一种更简洁的方式完成您要尝试执行的操作。

请参见下面的代码段（我没有将它们作为模态，但想法是相同的。）

这样，您可以拥有一个通用的modal组件，该组件处理共享的逻辑或样式，并通过专用插槽注入所需数量的modalContent子组件。

Vue.component('modal', {
  template: `
    <div>
      <h1>Shared elements between modals go here</h1>
      <slot name="content"/>
    </div>
  `
});


Vue.component('modalA', {
  template: `
    <div>
      <h1>I am modal A</h1>    
    </div>
  `
});

Vue.component('modalB', {
  template: `
    <div>
      <h1>I am modal B</h1>    
    </div>
  `
});

Vue.component('modalC', {
  template: `
    <div>
      <h1>I am modal C</h1>    
    </div>
  `
});


new Vue({
  el: "#app",
  data: {
    modals: ['modalA', 'modalB', 'modalC'],
    activeModal: null,
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button v-for="modal in modals" @click="activeModal = modal"> Open {{ modal }} </button>
  <modal>
    <template slot="content">
      <component :is="activeModal"></component>
    </template>
  </modal>
</div>

VueJs：如何重用引导程序模式对话框

2 个答案: