vue element 封装dialog 组件

以下是一个简单的 Vue Element 封装 dialog 组件的示例：

<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" :width="width" :height="height" :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>
export default {
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    height: {
      type: String,
      default: 'auto'
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    // 打开对话框
    open() {
      this.dialogVisible = true
    },
    // 关闭对话框
    close() {
      this.dialogVisible = false
    },
    // 确定操作
    confirm() {
      this.$emit('confirm')
      this.close()
    },
    // 取消操作
    cancel() {
      this.$emit('cancel')
      this.close()
    },
    // 关闭前的操作
    beforeClose(done) {
      this.$emit('beforeClose', done)
    }
  }
}
</script>

使用示例：

<template>
  <div>
    <el-button @click="openDialog">打开对话框</el-button>
    <my-dialog :title="dialogTitle" :width="dialogWidth" :height="dialogHeight" @confirm="handleConfirm" @cancel="handleCancel" @beforeClose="handleBeforeClose">
      <div>这是对话框内容</div>
      <div>可以放置任何内容</div>
    </my-dialog>
  </div>
</template>

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

export default {
  name: 'MyPage',
  components: {
    MyDialog
  },
  data() {
    return {
      dialogTitle: '对话框标题',
      dialogWidth: '60%',
      dialogHeight: 'auto'
    }
  },
  methods: {
    openDialog() {
      this.$refs.dialog.open()
    },
    handleConfirm() {
      console.log('点击了确定')
    },
    handleCancel() {
      console.log('点击了取消')
    },
    handleBeforeClose(done) {
      console.log('关闭前的操作')
      done()
    }
  }
}
</script>

在该组件中，我们使用了 Vue Element 中的 dialog 组件，并在其基础上封装了一些常用的功能，例如：

- 可以通过 props 自定义对话框的标题、宽度和高度；
- 可以通过默认插槽放置任何内容；
- 可以通过事件监听点击确定和取消按钮的操作，并在关闭对话框前执行一些操作。

在使用时，只需要像使用 Vue Element 中的 dialog 组件一样，在需要使用对话框的地方加入 `MyDialog` 组件，并通过 props 自定义对话框的样式和标题，然后在需要打开对话框的地方调用 `open()` 方法即可。同时，我们也可以在父组件中监听对话框的确认、取消、关闭前等事件，并执行相应的操作。