vue3 + element plus 二次封装弹框组件

下面是一个简单的vue3 + element plus 二次封装弹框组件的示例：

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

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '50%',
    },
  },
  methods: {
    beforeClose(done) {
      this.$confirm('确定关闭此窗口？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    confirm() {
      this.$emit('update:visible', false)
      this.$emit('confirm')
    },
  },
})
</script>

使用示例：

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

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

export default defineComponent({
  components: {
    MyDialog,
  },
  setup() {
    const dialogVisible = ref(false)
    const dialogTitle = ref('编辑信息')
    const name = ref('')
    const age = ref(0)

    const showDialog = () => {
      dialogVisible.value = true
    }

    const handleConfirm = () => {
      console.log(`姓名：${name.value}，年龄：${age.value}`)
    }

    return {
      dialogVisible,
      dialogTitle,
      name,
      age,
      showDialog,
      handleConfirm,
    }
  },
})
</script>