在Vue 3和Element Plus中，可以通过创建一个自定义组件来简单地封装弹框（对话框）的功能。以下是一个简单的示例：
- 创建一个新的Vue组件
BaseDialog.vue:
<template>
<el-dialog
:title="title"
:visible.sync="visible"
width="30%"
:before-close="handleClose">
<span>{{ message }}</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="handleConfirm">确 定</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
title: String,
message: String
});
const emit = defineEmits(['update:visible', 'confirm']);
const visible = ref(false);
const handleClose = (done) => {
emit('update:visible', false);
done();
};
const handleConfirm = () => {
emit('confirm');
visible.value = false;
};
</script>- 在父组件中使用
BaseDialog组件：
<template>
<BaseDialog
:title="dialogTitle"
:message="dialogMessage"
:visible="isDialogVisible"
@update:visible="isDialogVisible = false"
@confirm="handleConfirm"
/>
</template>
<script setup>
import BaseDialog from './BaseDialog.vue';
import { ref } from 'vue';
const isDialogVisible = ref(false);
const dialogTitle = '提示';
const dialogMessage = '这是一个弹框消息。';
const handleConfirm = () => {
console.log('确认操作');
};
// 触发弹框显示
const showDialog = () => {
isDialogVisible.value = true;
};
// 在需要的时候调用showDialog方法
</script>在这个例子中，BaseDialog组件接收title、message和visible属性，并定义了一个confirm事件。父组件通过@update:visible和@confirm监听对话框的关闭和确认事件。通过这种方式，你可以在不同的场景下复用弹框组件，并且可以通过传递不同的属性和监听不同的事件来定制弹框的行为。