vue封装对话框Dialog

封装弹窗部分

<template>
    <div class="totalDia">
        <span>This is a message</span>
        <span class="dialog-footer">
            <el-button @click="changeDialog">取消</el-button>
            <el-button type="primary" @click="changeDialog">确定</el-button>
        </span>
    </div>
</template>

<script lang="ts" setup>
const emits = defineEmits(['changes'])

const changeDialog = () => {
    emits('changes')
}
</script>
<style scoped>
.totalDia {
    width: 100%;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>

调用部分

<div>
            <el-button type="primary" text @click="dialogVisible = true">确定</el-button>
        </div>
        <el-dialog v-model="dialogVisible" title="提示" :before-close="handleClose">
            <dialogTotal @changes="handleClose"></dialogTotal>
        </el-dialog>

const dialogVisible = ref(false)
const handleClose = () => {
    console.log('111')
    dialogVisible.value = false
}