VueJs, как построить и разобраться с одним корневым компонентом с 6 разными модалами в нем - PullRequest
Новая
       42

VueJs, как построить и разобраться с одним корневым компонентом с 6 разными модалами в нем

0 голосов
/ 11 декабря 2018

У меня есть одно приложение с одним основным корневым компонентом, Editor .Этот редактор позволяет добавлять, редактировать и удалять строки и столбцы .У строк есть имена, но у столбцов есть имя и ограничение (число). 

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, который является слишком общим, и вычисляю модель и название модального окна (или диалоговое окно подтверждения) на основе темы ( строка или столбец ) и action ( add , edit , delete ).

Два Модальных компонента с пользовательской формой и один Подтверждение управляются 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.Но, опять же, я понятия не имею, как это сделать.

-

Что я могу сделать, чтобы улучшить мой код и управлять тем, какой модальный вид отображается и какие действия связаны с ним?

Редактировать: Боюсь, я не спрашивал о том, «как создать модал».Но как управлять сложным состоянием внутри одного корневого компонента.

1 Ответ

0 голосов
/ 11 декабря 2018

Вы можете создать компонент для ваших конкретных потребностей.Как-то так должно начаться. 

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