VueJs，如何构建和处理一个包含 6 种不同模式的根组件

Question

我有一个带有一个主要根组件的应用程序，编辑器。此编辑器允许添加、编辑和删除行和列。行有名称，但列有名称和限制（数字）。

Row(name:string)
Column(name:string, limit:number)

当添加或编辑 row 或 column 时，我必须以模式打开表单。删除一个时，我必须显示一个确认对话框。

+-- Editor ---------------------------------------------------------------+
|                                                                         |
|  +-- {{Add|Edit}} row ----+                                             |
|  |                        |                                             |
|  | name: [..............] |    +-- Confirm delete of {{row|column}} -+  |
|  |         [Cancel][Save] |    | Confirm deletion of {{row|column}}? |  |
|  +------------------------+    |                           [No][Yes] |  |
|                                +-------------------------------------+  |
|  +-- {{Add|Edit}} column -+                                             |
|  |                        |                                             |
|  |  name: [.............] |                                             |
|  | limit: [...]           |                                             |
|  |         [Cancel][Save] |                                             |
|  +------------------------+                                             |
|                                                                         |
+-------------------------------------------------------------------------+

--

实际上我有一个过于通用的ModalManager，它根据主题（行或列）和动作（添加、编辑、删除）。

两个具有自定义表单的Modal组件和一个Confirmation组件由ModalManager驱动：

<Confirmation v-if="manager.mode==='CONFIRM'" 
    title="manager.title"></Confirmation>
<Modal v-if="manager.model='ROW' && manager.mode!=='CONFIRM'
    title="manager.title">
  <!-- form for row with v-model="manager.model" -->
</Modal>
<Modal v-if="manager.model='COLUMN' && manager.mode!=='CONFIRM'
    title="manager.title">
  <!-- form for column with v-model="manager.model" -->
</Modal>

您可以想象，这是一团糟，我想将其重构为更好的东西。但我没有足够的 Vue 经验，无法很好地了解可能性。

我可以为每个模态设置一个单独的模型/控制器，或者使用我的 Vuex 商店或使用 vue-router。但是，再一次，我不知道该怎么做。

--

我可以做些什么来改进我的代码并管理显示的模式以及链接到它们的操作？

编辑： 恐怕，我不是在问“如何创建模态”。但是如何在一个根组件中管理复杂的状态。

Answer 1

您可以为您的特定需求创建一个组件。这样的事情应该可以帮助您入门。

<template>
   <div class="modal" v-if="show">
      <h3>{{title}}</h3>
      <div class="content" v-html="content">
         <!-- Remove this if you don't need complex content -->
         <slot></slot>
      </div>

      <div role="group">
         <button @click="submit">Save</button>
         <button @click="close">Cancel</button>
      </div>
   </div>
</template>

<script>
   export default {
      name: 'Modal',

      data() {
         return {
            show: false,
            title: '',
            content: '' // <- Accepts both HTML and plain text (as message)
         }
      },

      methods: {
         toggle(state) {
            this.show = state;  
         },

         open(title, content) {
            this.title = title;
            this.content = content;

            this.toggle(true);
         },

         close() {
            this.toggle(false);
         },

         submit() {
            // Handle form submission here
            this.close();
         }
      }
   }
</script>

JS

import Modal from './components/Modal.vue';

const vm = new Vue({
   methods: {
      editItem() {
         this.$refs.modal.open('Title', 'Content here');
      }
   },

   components: {
      Modal
   }
})

HTML

<table>
   <!-- rows and stuff -->
</table>

<!-- Add a `ref` so that it can be referenced later -->
<modal ref="modal"></modal>

<button @click.prevent="editItem">Edit item</button>