vue3封装ElementUI plus Dialog弹窗

在Vue 3中，你可以通过创建一个自定义组件来封装Element Plus中的Dialog组件。以下是一个简单的示例：

首先，创建一个新的Vue文件，例如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 setup>
import { ref } from 'vue';
import { ElDialog, ElButton } from 'element-plus';
 
const props = defineProps({
  title: String,
  width: {
    type: String,
    default: '30%',
  },
});
 
const emit = defineEmits(['update:visible', 'confirm']);
const visible = ref(false);
 
// 显示弹窗
function show() {
  visible.value = true;
}
 
// 隐藏弹窗
function hide() {
  visible.value = false;
}
 
// 关闭前的回调
function handleClose() {
  hide();
}
 
// 确认操作的回调
function handleConfirm() {
  emit('confirm');
  hide();
}
 
defineExpose({
  show,
  hide,
});
</script>
 
<style scoped>
.dialog-footer {
  display: flex;
  justify-content: end;
}
</style>

然后，你可以在父组件中使用这个封装的MyDialog组件：

<template>
  <my-dialog
    ref="myDialog"
    title="提示"
    @confirm="handleConfirm"
  >
    <!-- 这里放置你的内容 -->
  </my-dialog>
  <el-button @click="openDialog">打开弹窗</el-button>
</template>
 
<script setup>
import MyDialog from './MyDialog.vue';
import { ref } from 'vue';
 
const myDialog = ref(null);
 
function openDialog() {
  myDialog.value.show();
}
 
function handleConfirm() {
  console.log('确认操作');
}
</script>

在这个例子中，MyDialog组件接受title和width作为props，并定义了show和hide方法来控制对话框的显示和隐藏。它还定义了handleClose和handleConfirm方法来处理关闭和确认事件，并通过emit向父组件发送事件。父组件通过ref引用MyDialog组件，并在需要时调用show方法来显示对话框。