el-dialog封装成子组件

你可以将 `el-dialog` 封装成一个子组件，以下是一个示例：

<template>
  <div>
    <button @click="showDialog">打开对话框</button>
    <my-dialog :visible="dialogVisible" @close="closeDialog">
      <!-- 对话框内容 -->
      <p>这是对话框的内容</p>
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue';

export default {
  components: {
    MyDialog
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
};
</script>

然后，在 `MyDialog` 组件中，你可以使用 `el-dialog` 来实现具体的对话框样式和行为：

<template>
  <el-dialog :visible.sync="visible" @close="handleClose">
    <slot></slot>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>

这样，你就可以在父组件中使用 `<my-dialog>` 标签来打开和关闭对话框，并且对话框的内容可以放在插槽中。