vue3 el-dialog弹窗组件化封装

日常开发中用到弹窗的场景非常多,el-dialog可以说是拿来即用了,但是总会带着冗长的配置项,这时就需要做封装,让代码更简洁易用,增加可读性.

父组件

<confirm-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" @cancel="handleCancel" @confirm="handleConfirm" >
    <div>
        内容内容内容
    </div>
</confirm-dialog>

import ConfirmDialog from "@/components/ConfirmDialog.vue";

const dialogVisible = ref(false);
const dialogTitle = ref('');
const dialogWidth = ref('');

function resetPwd(){
    dialogTitle.value = '重置密码';
    dialogWidth.value = '30%';
    dialogVisible.value = true;
}

function handleCancel() {
    dialogVisible.value = false; 
};

function handleConfirm() {
    console.log('确认按钮被点击');
};

子组件

<template>
    <el-dialog
        :width="props.width"
        :title="props.title"
        v-model="dialogVisible"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
        draggable
    >
        <slot></slot>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel" style="margin-right: 10px;">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
/*
* @定义Dialog参数:
* width: 宽度； title：标题； v-model: 是否显示；
* show-close：是否显示关闭按钮； close-on-click-modal：通过点击遮罩关闭;  
* close-on-press-escape：通过按下 ESC 关闭 Dialog；
* destroy-on-close：关闭时销毁元素； align-center：文字是否居中； draggable：是否可拖拽
*/
const emits = defineEmits(['cancel', 'confirm'])
let dialogVisible = ref();
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false,
    },
    width: {
        type: String,
        default: '80%',
    },
    title: {
        type: String,
        default: '提示',
    },
});

// 取消按钮
const handleCancel = () => {
    emits('cancel', false);
};

// 确认按钮
const handleConfirm = () => {
    emits('confirm', false);
};
</script>