vue3+ts +elemnt plus 封装一个弹框组件

以下是一个基于Vue3+TypeScript+Element Plus的简单弹框组件封装示例：

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    :custom-class="customClass"
  >
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { ElDialog } from 'element-plus';

export default defineComponent({
  name: 'MyDialog',
  components: { ElDialog },
  props: {
    title: {
      type: String,
      default: '提示',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '50%',
    },
    beforeClose: {
      type: Function as PropType<() => boolean | Promise<boolean>>,
      default: () => true,
    },
    customClass: {
      type: String,
      default: '',
    },
  },
  emits: ['update:visible', 'confirm', 'close'],
  methods: {
    close() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    confirm() {
      this.$emit('confirm');
    },
  },
});
</script>

<style>
.dialog-footer {
  text-align: right;
  padding: 10px 20px;
  background-color: #f4f4f4;
  border-top: 1px solid #ebebeb;
}
</style>

使用示例：

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开弹框</el-button>
    <my-dialog
      v-model:visible="dialogVisible"
      @confirm="handleConfirm"
      @close="handleClose"
    >
      <el-form :model="formData" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="formData.age"></el-input>
        </el-form-item>
      </el-form>
    </my-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import MyDialog from '@/components/MyDialog.vue';
import { ElForm, ElFormItem, ElInput } from 'element-plus';

export default defineComponent({
  components: { MyDialog, ElForm, ElFormItem, ElInput },
  setup() {
    const dialogVisible = reactive(false);
    const formData = reactive({
      name: '',
      age: null,
    });
    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
    };
    const showDialog = () => {
      dialogVisible.value = true;
    };
    const handleConfirm = () => {
      console.log('提交表单：', formData);
      dialogVisible.value = false;
    };
    const handleClose = () => {
      console.log('关闭弹框');
    };
    return {
      dialogVisible,
      formData,
      rules,
      showDialog,
      handleConfirm,
      handleClose,
    };
  },
});
</script>