代码之家 › 专栏 › 技术社区 › gervais.b

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

vue-router vuex vue-component refactoring vuejs2

gervais.b · 技术社区 · 6 年前

我有一个应用程序有一个主要的根组件编辑这编辑允许添加、编辑和删除排和柱 .行有名称,但列有名称和限制(数字)。

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

在添加或编辑一行或者柱我必须以模态打开表格。当删除一个时,我必须显示一个确认对话框。

+-- 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 这太笼统了,需要根据主题 ( 一行或柱 )及行动 ( 添加 , 编辑 , 删去 ).

二 情态动词 具有自定义窗体和一个 确认书 组件由 临时管理者 :

<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路由器。但是,我还是不知道该怎么做。

我可以做些什么来改进代码,管理显示的模式以及与之相关的操作?

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

1 回复 | 直到 6 年前

Yom T. 6 年前

您可以根据自己的具体需求创建一个组件。像这样的事情应该让你开始。

<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>