Vue3封装确认弹框，提示弹框组件

        今天给大家分享一个vue3+typescript封装的确认弹框和提示弹框组件，有喜欢的小伙伴直接复制相应的代码拿到项目中使用。

<template>
    <Transition class="dialog">
        <div v-if="show" class="dialog-main">
            <div class="dialog-wrap">
                <h3 class="dialog-main-title" v-show="titleText != ''">{{ titleText }}</h3>
                <div v-if="contentText" class="dialog-main-content">{{ contentText }}</div>
                <slot v-else name="content"></slot>
                <div class="dialog-peration">
                    <div v-if="showType==='confirm'" class="cancel-btn" @click.stop="handleCancel">
                        <p class="btn-text cancel-btn-right">{{ cancelText }}</p>
                    </div>
                    <div class="confirm-btn" @click.stop="handleConfirm">
                        <p class="btn-text">{{ confirmText }}</p>
                    </div>
                </div>
            </div>
        </div>
    </Transition>
</template>

<style lang="scss" scoped>
// 进入和离开动画
.dialog-enter-active{
    animation: opacity 0.3s;
}
.dialog-leave-active{
    animation: outOpacity 0.2s;
}
.dialog-enter-active .dialog-wrap{
    animation: scale 0.3s;
}
.dialog-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 998;
}
// 包裹层样式
.dialog-wrap{
    position: absolute;
    top:28%;
    left:0;
    right: 0;
    width: 320px;
    margin: 0 auto;
    background-color: #fff;
    border-radius:8px;
    z-index: 999;
    //设置或检索是否允许用户选中文本
    user-select:none;
}
// 顶部标题部分
.dialog-main-title{
    padding-top: 5px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
// 中间内容部分
.dialog-main-content{
    padding: 0 15px;
    padding-top: 10px;
    margin-bottom: 32px;
    text-align: center;
    font-size: 14px;
    color: rgb(100,101,102);
    line-height: 1,5;
}
// 底部按钮样式
.dialog-peration{
    display: flex;
    border-radius: 8px;
    border: 1px solid #eee;
}
.dialog-peration .cancel-btn, .confirm-btn{
    flex: 1;
}
.dialog-peration .confirm-btn{
    color: rgb(38, 134, 255);
}
.dialog-peration .btn-text{
    text-align: center;
    font-size: 14px;
    margin: 8px 0;
    padding: 6px 0;
}
// 取消按钮样式
.cancel-btn-right {
    border-right: 1px solid #eee;
}
// 进入的动画
@keyframes opacity{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes scale {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
// 离开的动画
@keyframes outOpacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

<script lang="ts" setup>
const props = defineProps({
    show:{
        type: Boolean,
        default: false
    },
    titleText: {
        type: String,
        default: '标题'
    },
    contentText: {
        type: String,
        default: ''
    },
    cancelText: {
        type: String,
        default: '取消'
    },
    confirmText: {
        type: String,
        default: '确认'
    },
    // 等于confirm是确认按钮，不等于confirm是提示按钮
    showType: {
        type: String,
        default: 'confirm'
    }
})
const emits = defineEmits(["update:show", "confirm", "close"]);
const handleCancel = () => {
  emits("update:show", false);
  emits("close");
};

const handleConfirm = () => {
  emits("update:show", false);
  emits("confirm");
};
</script>

dialogAssembly

参数		说明		类型		默认值		备注
defineProps		默认展示的字段		object
content				slot
controls		弹框按钮

defineProps

参数		说明		类型		默认值		备注
show		控制弹框显示和隐藏		boolean		false（隐藏）true（显示）
titleText		标题		string		标题
contentText		内容		string		空
cancelText		取消		string		取消
confirmText		确认		string		确认
showType		类型		string		confirm（确认框）

controls

参数		说明		类型		默认值		备注
handleCancel		取消隐藏弹框		function(record)
handleConfirm		取消隐藏弹框，按需传入相应的接口，参数等		function(record)