vue中封装el-dialog为公共组件

一、首先封装一个组件

注意：el-dialog的关闭操作，使用before-close自己写，否则会导致子组件改变父组件的参数而报错；

<template>
  <el-dialog title="数据详情" :visible.sync="dialogDetailVisible" :close-on-click-modal="false" :before-close="dialogClose">
    <div class="top">
      <p class="title">
        {
  { dialogName }}
      </p>
    </div>
    <div slot="footer" class="dialog-footer" />
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogDetailVisible: {
      type: Boolean,
      default: false
    },
    dialogName: {
      type: String,
      default: '数据源'
    }
  },
  data() {
    return {
    }
  },
  watch: {
    dialogDetailVisible: function(val) {
      this.$emit('update:dialogDetailVisible', val)
      if