vue封装对话框组件Dialog

Vue.extend 实现 Dialog 提示组件封装

在 components 目录下新建 Dialog 文件夹作为 Dialog 组件文件，新建 index.vue 和 index.js 文件进行组件封装，并在 main.js 中将组件挂载到 vue 原型上实现全局使用

components/Dialog/index.vue

<template>
    <div id="dialog">
        <div class="dialog-box">
            <p class="title">{{ title }}</p>
            <p class="content">{{ content }}</p>
            <div class="btn-box">
                <button class="left-btn" @click="cancel">{{ left_buttton }}</button>
                <button class="right-btn" @click="ok">{{ right_buttton }}</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'dialog',
    data() {
        return {
            //显示标题，默认为“提示”
            title: '提示',
            //显示内容
            content: '',
            //左按钮显示文本，默认为“取消”
            left_buttton: '取消',
            //右按钮显示文本，默认为“确定”
            right_buttton: '确定'
        }
    },
    methods: {
        //点击取消按钮
        cancel() {
            this.onCancel()  //点击取消的回调函数
            this.$destroy(true)  //销毁组件
            this.$el.parentNode.removeChild(this.$el)  //父元素中移除dom元素（$el为组件实例）
        },
        //点击确定按钮
        ok() {
            this.onOk()  //点击确定的回调函数
            this.$destroy(true)  //销毁组件
            this.$el.parentNode.removeChild(this.$el)  //父元素中移除dom元素（$el为组件实例）
        }
    }
}
</script>

<style lang='scss' scoped>
    #dialog {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 9999;
        .dialog-box {
            width: 400px;
            border-radius: 2px;
            background-color: #fff;
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            padding: 20px 30px;
            box-sizing: border-box;
            .title {
                font-size: 20px;
                margin-bottom: 15px;
                text-align: center;
            }
            .content {
                font-size: 16px;
                line-height: 22px;
            }
            .btn-box {
                width: 100%;
                height: 70px;
                padding-top: 32px;
                padding-left: 170px;
                box-sizing: border-box;
                button {
                    width: 65px;
                    height: 38px;
                    font-size: 16px;
                    margin-left: 20px;
                    border-radius: 2px;
                    border: none;
                    outline: none;
                    cursor: pointer;
                }
                .left-btn {
                    background-color: #DCDFE6;
                    color: #606266;
                }
                .right-btn {
                    background-color: #409EFF;
                    color: #fff;
                }
            }
        }
    }
</style>

components/Dialog/index.js：

import Vue from 'vue'
import Dialog from './index.vue'

//创建Dialog构造器
let DialogConstrutor = Vue.extend(Dialog)
let instance

const dialog = function(options = {}) {
    //设置默认参数为对象，如果参数为字符串，参数中message属性等于该参数，回调函数为空
    if(typeof options === 'string') {
        options = {
            content: options,
            onOk: () => {},
            onCancel: () => {}
        }
    }
    //创建实例
    instance = new DialogConstrutor({
        data: options
    })
    //将实例挂载到body下
    document.body.appendChild(instance.$mount().$el)
}

export default dialog

main.js

//引入Dialog组件
import Dialog from './components/Dialog'

//将Dialog组件挂载到vue原型上
Vue.prototype.$dialog= Dialog

在需要使用 Dialog 组件的地方调用 this.$dialog) 并传入参数使用

//传入对象参数
this.$dialog({
    title: '提示',
    content: '这是一段提示信息',
    left_buttton: '取消',
    right_buttton: '确定',
    onOk: () => {
        console.log('ok');
    },
    onCancel: () => {
        console.log('cancel');
    }
})

//传入字符串参数（该参数会做为参数中content属性的值，回调函数为空）
this.$dialog('这是一段提示信息')

效果图