el-dialog封装成组件

`el-dialog` 是 Element UI 中的一个弹窗组件，它是 Vue.js 库的一部分，用于创建可交互的对话框。如果你想将其封装成一个自定义组件，以便在整个项目中复用，可以按照以下步骤操作：

1. **引入 Element UI**：首先确保在你的项目中已经安装并导入了 Element UI。

// 在 main.js 或者你想使用的组件里
import { ElDialog } from 'element-ui';

2. **创建组件模板**：定义一个新的 Vue 组件，包含 `el-dialog` 的元素，并提供必要的属性供外部控制。

<template>
  <el-dialog :visible.sync="dialogVisible" title="对话框标题">
    <p>这是对话框的内容</p>
    <!-- 可能需要的其他元素 -->
    <button @click="handleClose">关闭</button>
  </el-dialog>
</template>

<script>
export default {
  name: 'CustomDialog',
  data() {
    return {
      dialogVisible: false, // 控制对话框是否显示
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

3. **使用组件**：现在你可以将这个自定义组件添加到任何需要的地方，通过 `dialogVisible` 属性来打开或关闭它。

<!-- 使用 CustomDialog 组件 -->
<custom-dialog v-model="showDialog"></custom-dialog>
<script setup>
import CustomDialog from '@/components/Common/CustomDialog.vue';
const showDialog = ref(false); // 在setup中声明状态
</script>