vue3如何封装全局弹窗组件

封装组件是为了能够更加便捷、快速的进行业务功能的开发。组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中，我们难免会写很多类似的、重复的代码，有些相似的功能但涉及的字段有一些不一样。这时候可以把那些相同的功能，抽出来封装成组件，通过组件引用方式就很省事了。

今天我们来封装一个使用率非常频繁的一个组件弹窗

全局dialog封装这里用的正是我们昨天所学的createVNode,render

第一步，在components文件夹中创建一个dialog.vue 文件

<script setup>
const props = defineProps({
    title: {
        type: String,
        default: '提示'
    },
    content: {
        type: String,
        default: ''
    },
    className: {
        type: String,
        default: 'text-center'
    },
    cancelButtonText: {
        type: String,
        default: '取消'
    },
    okButtonText: {
        type: String,
        default: '确定'
    },
    okButton: {
        type: Function
    },
    cancelButton: {
        type: Function
    }
})
</script>
    
<template>
    <!--dialog-modal-->
    <view class="dialog-modal show">
        <view class="flex">
            <view class="box">
                <view class="modal-title">
                    {{ title }}
                </view>
                <view :class="`${className} modal-desc`">
                    <text class="text">{{ content }}</text>
                </view>
                <view class="modal-btn">
                    <button class="btn" @click='cancelButton'>{{ cancelButtonText }}</button>
                    <button class="confirm btn" @click='okButton'>{{ okButtonText }}</button>
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="less" scoped>
.dialog-modal {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;

    .flex {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .box {
            background-color: #ffffff;
            border-radius: 20rpx;
            padding: 40rpx;
            width: 65%;
            text-align: center;
            font-size: 28rpx;

            .modal-title {
                font-size: 32rpx;
                font-weight: bold;
                color: var(--zpyj-text-main-color);
            }

            .modal-desc {
                margin: 30rpx 0;

                .text {
                    display: block;
                    line-height: 44rpx;
                }

                &.text-left {
                    text-align: left;
                }

                &.text-center {
                    text-align: center;
                }
            }

            .modal-btn {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .btn {
                    background-color: #f6f6f6;
                    border-radius: 44rpx;
                    padding: 0 70rpx;
                    font-size: 32rpx;
                    margin: 0;

                    &.confirm {
                        background-image: linear-gradient(90deg, var(--zpyj-text-main-color) 0%, #4993ff 100%);
                        color: #fff;
                    }
                }
            }

        }
    }

    &.show {
        display: block;
    }
}
</style>

第二步，在utils中建立dialog.js


import { createVNode, render } from 'vue'
import Dialog from './uDialogModal.vue'
const divDom = document.createElement('div')
divDom.setAttribute('class', 'u-dialog-modal-container')
document.body.appendChild(divDom);

const dialogPlguin = (option) => {
    return new Promise((resolve, reject) => {
        const okButton = () => {//确认
            render(null, divDom)
            resolve()
        }
        const cancelButton = () => {//  取消
            render(null, divDom)
            reject(new Error('取消'))
        }
        const vNode = createVNode(Dialog, { ...option, okButton, cancelButton })
        render(vNode, divDom)
    })
}
export default dialogPlguin

//第二种方式
// export default {
    // install(app) {
    //     app.config.globalProperties.$dialog = dialogPlguin
    // }
    //main.js中引入
    //import dialog from './utils/dialog'
    //app.use(dialog).mount('#app')
// }

第三步，组件中使用

import uDialogModal from '@/components/uModal/uDialogModal'
uDialogModal({ content: '确定要取消当前订单？' }).then(() => {
  console.log('成功逻辑');
}).catch(err => {
  console.log('失败逻辑')
})
//第二种方式
//const { proxy } = getCurrentInstance();
//const getDialog = () => {
//  proxy.$dialog({ title: '你好啊', noButtonTxt: '是' }).then(() => {
//    console.log('成功')
//  }).catch(err => {
//    console.log(err)
//  })
//}

以上这篇vue3如何封装全局弹窗组件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。