VueJ:如何重用引导模式对话框

Question

我已经创建了三个简单的按钮来触发三个不同的引导模式对话框。模态对话框为"Add Product"、"Edit“和"Delete Product"。Add和Edit模态对话框都包含一个带有两个输入元素的表单，而Delete模式对话框包含一个简单的文本。我意识到我的代码变得非常混乱和难以维护。因此，我有以下问题：

1)如何重用模态对话框，而不是创建三个单独的对话框？

( 2)我如何知道哪个模态对话被触发了？

Update：我已经开发了一个解决方案，其中将包括条件语句，例如v-if、v-else和v-，以跟踪用户单击哪个按钮。不过，我仍然觉得有更好的解决办法。有人能帮我/给我建议吗？

下面是我的当前代码：

       <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组件，它处理共享逻辑或样式，以及通过专用插槽注入的尽可能多的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>

​

Answer 2

更新

现在，您可能会考虑如何关闭您的模式并让父组件知道它。点击按钮触发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-如何重用模态对话框，而不是创建三个单独的对话框。

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

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

现在在html部分的commonModal中

<div class="modal">
  <!-- Use your received data here which get received from parent -->
  <your modal code />
</div>

现在将commonModal导入到消费/父组件。在父组件(例如- isVisible: false )中创建数据属性，并为要在modal中显示的data创建一个计算属性(如modalContent )。

现在像这样使用它

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

以上将帮助您重用模式，您只需要从父组件发送data。

现在，第二个问题也将在这里得到解决，，我如何知道哪个模式对话框被触发了？

只需验证isVisible属性，以检查modal是否打开。如果isVisible = false，那么您的模态是不可见的，反之亦然。