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>
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3封装全局弹窗组件的步骤如下: 1. 创建一个Vue实例,作为全局弹窗组件的容器。可以使用`createApp`方法创建Vue实例,并将其挂载到一个DOM元素上。 2. 在全局弹窗组件上定义必要的属性和方法。比如,可以定义一个`visible`属性控制弹窗的显示与隐藏,一个`title`属性用于显示弹窗的标题,一个`content`属性用于显示弹窗的内容等。 3. 在全局弹窗组件内部实现弹窗的样式和交互逻辑。可以使用Vue的模板语法和样式定义实现弹窗的外观和样式效果,并通过Vue的响应式特性,实现弹窗的交互逻辑,比如点击关闭按钮时隐藏弹窗。 4. 添加全局方法,在Vue实例的原型上添加一个方法,用于在任意组件中调用弹窗组件。可以使用`app.config.globalProperties`来添加全局方法,以便在任何地方都可以访问到该方法。 5. 在组件中使用全局弹窗组件。在需要显示弹窗的组件中,通过调用全局方法来调用弹窗组件。可以通过传递参数的方式,动态设置弹窗的内容和样式。 6. 在全局弹窗组件的内部实现弹窗的生命周期钩子函数,比如`mounted`函数用于在弹窗组件挂载到DOM后执行相应的逻辑。 通过以上步骤,就可以封装一个可在任何组件中使用的全局弹窗组件。在使用过程中,只需要调用全局方法,传入相应的参数,即可显示自定义的弹窗内容和样式,提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值