在Vue 3和TypeScript中，你可以通过创建一个自定义组件来二次封装Element Plus中的对话框（Dialog）。以下是一个简单的示例：
首先，创建一个新的组件文件MyDialog.vue:
<template>
<el-dialog
:title="title"
:visible.sync="visible"
:width="width"
:before-close="handleClose"
>
<slot></slot>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleConfirm">确 定</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElDialog } from 'element-plus';
export default defineComponent({
name: 'MyDialog',
components: {
ElDialog
},
props: {
title: {
type: String,
default: ''
},
width: {
type: String,
default: '30%'
},
visible: {
type: Boolean,
default: false
}
},
emits: ['update:visible', 'confirm'],
setup(props, { emit }) {
const handleClose = () => {
emit('update:visible', false);
};
const handleConfirm = () => {
emit('confirm');
};
return {
handleClose,
handleConfirm
};
}
});
</script>
然后，你可以在父组件中使用这个自定义的对话框组件：
<template>
<my-dialog
:title="dialogTitle"
:visible="dialogVisible"
@update:visible="dialogVisible = $event"
@confirm="handleConfirm"
>
<!-- 这里放置对话框内容 -->
<p>这是一个自定义对话框的示例内容</p>
</my-dialog>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import MyDialog from './MyDialog.vue';
export default defineComponent({
name: 'ParentComponent',
components: {
MyDialog
},
setup() {
const dialogTitle = ref('提示');
const dialogVisible = ref(false);
const handleConfirm = () => {
// 处理确认事件
dialogVisible.value = false;
};
return {
dialogTitle,
dialogVisible,
handleConfirm
};
}
});
</script>
在这个例子中，我们创建了一个名为MyDialog.vue的组件，它接收title、width和visible属性，并定义了handleClose和handleConfirm方法来处理关闭和确认事件。父组件中，我们通过绑定title和visible属性以及update:visible和confirm事件，来控制对话框的显示和处理确认操作。