vue3 + element plus 二次封装dialog 组件

以下是一个示例：

<template>
  <el-button type="primary" @click="showDialog">打开对话框</el-button>
</template>

<script>
import { defineComponent } from 'vue';
import { ElDialog } from 'element-plus';

export default defineComponent({
  components: {
    ElDialog,
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      dialogWidth: '50%',
      dialogHeight: '80%',
      dialogFullscreen: false,
    };
  },
  methods: {
    showDialog({ title, width, height, fullscreen }) {
      this.dialogTitle = title || '';
      this.dialogWidth = width || '50%';
      this.dialogHeight = height || '80%';
      this.dialogFullscreen = fullscreen || false;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
  render() {
    return (
      <el-dialog
        title={this.dialogTitle}
        visible={this.dialogVisible}
        width={this.dialogWidth}
        height={this.dialogHeight}
        fullscreen={this.dialogFullscreen}
        onClose={this.handleClose}
      >
        {this.$slots.default()}
      </el-dialog>
    );
  },
});
</script>

此示例中的 showDialog 方法接收一个对象参数，可以配置对话框的标题、宽度、高度、是否全屏等。使用时可以在父组件中引入此对话框组件并调用 showDialog 方法打开对话框，通过插槽方式插入对话框内容。

使用示例：

<template>
  <my-dialog ref="myDialog">
    <p>这是对话框内容</p>
  </my-dialog>
  <el-button type="primary" @click="openDialog">打开对话框</el-button>
</template>

<script>
import { defineComponent, ref } from 'vue';
import MyDialog from './MyDialog.vue';

export default defineComponent({
  components: {
    MyDialog,
  },
  setup() {
    const myDialogRef = ref(null);

    function openDialog() {
      myDialogRef.value.showDialog({
        title: '这是对话框标题',
        width: '60%',
        height: '90%',
        fullscreen: true,
      });
    }

    return {
      myDialogRef,
      openDialog,
    };
  },
});
</script>