封装el-dialog

以下是封装el-dialog的示例代码：

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

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    beforeClose: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    open() {
      this.dialogVisible = true
    },
    close() {
      this.dialogVisible = false
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

在父组件中使用封装的el-dialog组件：

<template>
  <div>
    <el-button @click="openDialog">打开弹窗</el-button>
    <my-dialog :title="dialogTitle" :before-close="beforeClose" @confirm="handleConfirm">
      <el-form>
        <!-- 表单内容 -->
      </el-form>
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from '@/components/MyDialog'

export default {
  components: {
    MyDialog
  },
  data() {
    return {
      dialogTitle: '弹窗标题'
    }
  },
  methods: {
    openDialog() {
      this.$refs.dialog.open()
    },
    beforeClose() {
      // 关闭弹窗前的回调
    },
    handleConfirm() {
      // 点击确定按钮的回调
    }
  }
}
</script>