elementui .el-dialog 封装

对于 elementui 的 el-dialog 组件，可以进行封装来方便使用。

封装的步骤如下：

1. 创建一个新的 Vue 组件，命名为 MyDialog。

2. 在 MyDialog 组件中引入 elementui 的 el-dialog 组件，并设置相关属性和事件，例如：

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="beforeClose"
    :append-to-body="appendToBody"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :lock-scroll="lockScroll"
    :custom-class="customClass"
    :destroy-on-close="destroyOnClose"
  >
    <slot></slot>
  </el-dialog>
</template>

<script>
export default {
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    beforeClose: {
      type: Function,
      default: null
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    customClass: {
      type: String,
      default: ''
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    }
  }
}
</script>

3. 在需要使用 el-dialog 的地方，引入 MyDialog 组件，并使用 v-model 绑定 visible 属性来控制对话框的显示和隐藏，例如：

<template>
  <my-dialog v-model="dialogVisible" title="My Dialog">
    <p>Dialog content goes here.</p>
  </my-dialog>
</template>

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

export default {
  components: {
    MyDialog
  },
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

通过这样的封装，我们可以在需要使用 el-dialog 的地方，直接使用 MyDialog 组件，而不用重复设置 el-dialog 的属性和事件。同时，也可以通过修改 MyDialog 组件的默认属性来定制化 el-dialog 的样式和行为。