The demands THAT I face

  1. In a list on the home page, clicking on one of the items opens a detail dialog box that has multiple buttons to open different dialog boxes
  2. Dialog box unique, when opening a new dialog box, close the previous one

My analysis of the needs

  1. There is no need to think about the hierarchy between dialogs
  2. The dialog box must be inserted one level below the body
  3. Create dialog box components as JS instead of using them on templates

My implementation process

  1. The first step is to create a dialog template component 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>
Copy the code
The created dialog box is a basic template, and the general style of the dialog box needs to be consistent, so encapsulate the dialog box template firstCopy the code
  1. Create a dialog box component, warndialog.vue
<template>
    <v-dialog title="..." width="500px" @close="closeDialog">
        <template slot="content">... </template> <template slot="toolbar">... </template> </ V-dialog > </template> <script> // component 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>
Copy the code
Here is the key code, which is common on the web, to mount the current component under the body. CloseDialog is the method to close this dialog box, and isDestroy is also key.Copy the code
  1. Use a dialog box component
import Vue from 'vue';
import WarnDialog from '.. /dialogs/warnDialog'; // Const dialog = vue.extend (WarnDialog); const instance = new dialog({ data: { unitId: item.id } }); instance.$mount(a); this.dialog = instance;Copy the code
Here do not understand the actual operation can be directly, vUE components can be directly such instancesCopy the code

Look at the

The message component is inspired by elementUI, which was immediately implemented. Please point out where it can be optimized.