私が直面しているニーズ

1. ホームページのリストで、項目の一つをクリックすると、詳細ダイアログボックスが開きます。
2. ダイアログボックスは、新しいダイアログボックスが開かれたときに、最後のダイアログボックスを閉じるというユニークなものです。

私の要求分析

1. ダイアログ間の上下関係を考慮する必要なし
2. ダイアログボックスは、本文の次のレベルに挿入する必要があります。
3. ダイアログボックスのコンポーネントをテンプレート上で使用するのではなく、jsとして作成します。

1. 最初のステップは、ダイアログボックスのテンプレートコンポーネントであるdialog.vueを作成することです。

 <template>
 <div class="dialog_fix">
 <div class="dialog" :style="{width: width}">
 <div class="header">
 <div class="title">{{ title }}</div>
 <div class="close" @click="$emit('close')"><i class="el-icon-close"></i></div>
 </div>
 
 <div class="content">
 <slot name="content"></slot>
 </div>
 
 <div class="footer">
 <slot name="toolbar"></slot>
 </div>
 </div>
 </div>
 </template>
 <script>
 export default {
 props: ["title", "width"]
 }
 </script>

これは単なる基本テンプレートであり、ダイアログの一般的なスタイルは同じである必要があるので、まずダイアログ・テンプレートをカプセル化する。

1. ダイアログコンポーネントの作成 warnDialog.vue

<template>
 <v-dialog title="..." width="500px" @close="closeDialog">
 <template slot="content">
 ...
 </template>
 <template slot="toolbar">
 ...
 </template>
 </v-dialog>
</template>
<script>
//  
import Dialog from './dialog';
export default {
 components: {
 'v-dialog': Dialog
 },
 data() {
 return {
 isDestroy: false
 }
 },
 created() {
 },
 mounted() {
 const body = document.querySelector("body");
 if (body.append) {
 body.append(this.$el);
 } else {
 body.appendChild(this.$el);
 }
 },
 destroyed() {
 },
 methods: {
 closeDialog() {
 this.isDestroy = true;
 this.$destroy(true);
 this.$el.parentNode.removeChild(this.$el);
 }
 }
 
}
</script>

以下は、bodyの下に現在のコンポーネントをマウントするための、ウェブ上ではより入手しやすくなっている重要なコードである。
closeDialogはダイアログを閉じるためのメソッドだが、isDestroyも非常に重要で、ここでは紹介しないが、問題に遭遇すれば当然その役割を理解できる。

1. ダイアログボックスコンポーネントの使用

import Vue from 'vue';
import WarnDialog from '../dialogs/warnDialog'; //  
const dialog = Vue.extend(WarnDialog);
const instance = new dialog({
 data: {
 unitId: item.id
 }
});
instance.$mount();
this.dialog = instance;

ここで何をしているのかわからなければ、そのままでいい。vueコンポーネントを次のようにインスタンス化する。