javascript - VueJs : How to reuse bootstrap modal dialog

Question

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

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

正如已经提到的，我将使用插槽和动态组件渲染来以更干净的方式完成您想要做的事情。

请参阅下面的代码片段(我没有将它们设为模态，但想法是相同的)。

这样，您就可以拥有一个处理共享逻辑或样式的通用 modal 组件，以及根据需要通过专用注入(inject)的多个 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>