vue封装自定义组件并挂载原型上

自定义弹窗组件

封装一个自定义弹窗组件，并挂载到Vue原型链，实现多种调用，字段借鉴于Element-UI，拓展性强

组件源码

<template>
    <div class="custom-dialog" v-if="show">
        <div class="dialog-shade" @click="close"></div>
        <div class="dialog-box" :style="{ width }">
            <div class="dialog-title">
                {{title}}
                <em class="iconfont" v-if="showClose" @click="close">&#xe68c;</em>
            </div>
            <div class="dialog-center">
                <div class="dialog-content">
                    <template v-if="dangerouslyUseHTMLString">
                        <slot name="dialog-message"></slot>
                    </template>
                    <p class="dialog-message-text" v-else>{{message}}</p>
                </div>
                <div class="dialog-button s_flex jc_ct">
                    <div class="dialog-button-item cancle" v-if="showCancelButton" @click="cancle">{{cancelButtonText}}</div>
                    <div class="dialog-button-item" v-if="showConfirmButton" @click="confirm">{{confirmButtonText}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            width: {
                type: String,
                default: '30%'
            },
            show: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '提示'
            },
            message: {
                type: String,
                default: '弹窗内容'
            },
            showClose: {	//	是否展示关闭按钮
                type: Boolean,
                default: true
            },
            showCancelButton: {	//	是否展示取消按钮
                type: Boolean,
                default: false
            },
            showConfirmButton: {	//	是否展示确定按钮
                type: Boolean,
                default: true
            },
            cancelButtonText: {	//	关闭按钮文案
                type: String,
                default: '取消'
            },
            confirmButtonText: {	//	确定按钮文案
                type: String,
                default: '确定'
            },
            dangerouslyUseHTMLString: {	//	是否使用插槽
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                is_show_dialog: false
            }
        },
        methods: {
            /** 点击关闭弹窗 **/
            close() {
                this.$emit('close')
            },
            /** 点击取消按钮 **/
            cancle() {
                this.$emit('cancle')
            },
            /** 点击确定按钮 **/
            confirm() {
                this.$emit('confirm')
            },
        }
    }
</script>

<style lang="scss" scoped>
    .custom-dialog {
        width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 9;
        .dialog-shade { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; }
        .dialog-box { background-color: #ffffff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; }
        .dialog-box .dialog-title { width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: #f8f8f8; font-size: 14px; position: relative; }
        .dialog-box .dialog-title em { padding: 0 20px; font-size: 18px; color: #CCCCCC; cursor: pointer; position: absolute; right: 0; top: 0; }
        .dialog-box .dialog-center { padding: 30px 0; }
        .dialog-box .dialog-content {  }
        .dialog-box .dialog-message-text { line-height: 4; text-align: center; font-size: 14px; }
        .dialog-box .dialog-button { width: 100%; }
        .dialog-box .dialog-button .dialog-button-item { width: 120px; height: 34px; line-height: 34px; text-align: center; border: 1px solid var(--main-color); background-color: var(--main-color); font-size: 14px; color: #ffffff; cursor: pointer; }
        .dialog-box .dialog-button .dialog-button-item.cancle { border-color: 1px solid var(--main-color); background-color: #ffffff; color: var(--main-color); }
    }
</style>

封装JS

import Vue from 'vue'
import customDialog from '@/components/dialog/customDialog'

//  生成类
const dialogConstrutor = Vue.extend(customDialog)

//  将组件挂在到Vue原型链
const createDialogDom = (options) => {
    return new Promise((resolve, reject) => {
        //  创建实例
        const currtent = new dialogConstrutor({
            //  将实例挂在到div元素
            el: document.createElement('div')
        })
        currtent.title = options.title || '提示'
        currtent.message = options.message || '弹窗内容'
        currtent.showCancelButton = options.showCancelButton || false
        currtent.showConfirmButton = options.showConfirmButton || true
        currtent.cancelButtonText = options.cancelButtonText || '取消'
        currtent.confirmButtonText = options.confirmButtonText || '确定'
        currtent.dangerouslyUseHTMLString = options.dangerouslyUseHTMLString || false
        currtent.show = true
    
        //  将实例元素挂在到全局挂载点
        document.body.appendChild(currtent.$el)
        
        currtent.confirm = () => {
            resolve();
            currtent.show = false
        }
        
        currtent.cancle = () => {
            reject()
            currtent.show = false
        }
        
        currtent.close = () => {
            reject()
            currtent.show = false
        }
    })
}

/*//  将组件挂载到Vue原型链
const CustomDialog = () => {
    Vue.prototype.$customdialog = createDialogDom
}*/

export default createDialogDom

在main.js中引用

//  导入自定义弹窗组件
import CustomDialog from './components/dialog/customDialog'

import customdialog from './utils/packageInstall/custom-dialog'

Vue.component('CustomDialog',CustomDialog)
Vue.prototype.$customdialog = customdialog

页面应用

<template>
        <!--弹窗-->
        <custom-dialog :title="'结果通知'" :show="is_show_dialog" dangerouslyUseHTMLString @confirm="handleClickConfirm" @close="is_show_dialog = false">
            <template slot="dialog-message">
                <ul class="">
                   <li>
                       <label>通知时间：</label>
                       <span>2022-01-11 11:44:22</span>
                   </li>
                </ul>
            </template>
        </custom-dialog>
</template>

<script>
export default {
    data () {
        return {
            is_show_dialog: false
        }
    },
    methods: {
        handleClickShowDialog () {
            this.$customdialog({
                title: '提示'
            }).then(() => {
                console.log('success')
            }).catch(() => {
                console.log('catch')
            })
        }
    }
}
</script>