Vue2 针对el-dialog进行二次封装

Vue2 可以通过对 el-dialog 进行二次封装来满足自己的需求。一般来说，我们会在项目中封装一些基础组件，比如说对话框、表格、表单等等，这些组件的封装可以使得我们在使用时更加方便快捷。

对于 el-dialog 的二次封装，一般需要注意以下几点：

1. 组件名和引入方式：在封装组件时，需要给组件起一个唯一的名字，避免和其他组件重名。同时，为了方便引入，可以将组件导出为一个单独的 js 文件，然后在需要使用的地方引入。

2. 组件属性：在封装组件时，需要考虑到使用者的需求，将一些常用的属性暴露出来，同时也可以自定义一些属性来更好地满足需求。

3. 插槽：el-dialog 中有一些插槽，比如 title、footer 等，我们需要将这些插槽暴露出来，方便使用者进行自定义。

下面是一个简单的 el-dialog 二次封装示例：

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :before-close="beforeClose"
    :close-on-press-escape="closeOnPressEscape"
    :lock-scroll="lockScroll"
    :custom-class="customClass"
    :close-on-click-modal="closeOnClickModal"
    :show-close="showClose"
  >
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </el-dialog>
</template>

<script>
export default {
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    },
    beforeClose: Function,
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    customClass: {
      type: String,
      default: ''
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    }
  }
}
</script>

在这个示例中，我们将 el-dialog 的一些常用属性暴露出来，同时将 header、content、footer 三个插槽暴露出来，方便使用者自定义。在使用时，只需要引入这个组件，然后像使用 el-dialog 一样使用即可。