vue3 、Element Plus新增公共组件或共用组件----Dialog 对话框组件

在Vue 3和Element Plus中创建一个新的对话框组件可以通过以下方式实现：

1. 创建一个新的Vue组件，例如MyDialog.vue。
2. 使用<el-dialog>组件作为基础，并添加必要的属性和事件。
3. 通过props传递对话框的属性和事件，并使用v-model绑定显示状态。

以下是一个简单的对话框组件示例：

<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';
 
const props = defineProps({
  title: String,
  width: {
    type: String,
    default: '30%',
  },
});
 
const emit = defineEmits(['update:visible', 'close', 'confirm']);
const visible = ref(false);
 
// 显示对话框
function show() {
  visible.value = true;
}
 
// 处理关闭事件
function handleClose() {
  visible.value = false;
  emit('update:visible', false);
  emit('close');
}
 
// 处理确认事件
function handleConfirm() {
  emit('confirm');
}
 
defineExpose({
  show,
});
</script>
 
<style scoped>
.dialog-footer {
  display: flex;
  justify-content: end;
}
</style>

使用该组件时，可以这样做：

<template>
  <MyDialog
    title="提示"
    width="40%"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    @close="handleClose"
  >
    <p>这是一个对话框内容示例。</p>
  </MyDialog>
</template>
 
<script setup>
import MyDialog from './MyDialog.vue';
import { ref } from 'vue';
 
const dialogVisible = ref(false);
 
function handleConfirm() {
  console.log('Confirmed');
}
 
function handleClose() {
  console.log('Closed');
}
</script>

在这个例子中，我们创建了一个可复用的MyDialog组件，并通过v-model来控制对话框的显示状态。我们还定义了title、width和v-model:visible属性，以及@close和@confirm事件，这些都可以根据需求进行调整和扩展。