二次封装element组件---el-dialog

1.创建子组件，存放el-dialog代码，封装自己的组件，防止直接操作visible

  <el-dialog class="comn_dialog" :title="dialogTitle" :visible.sync="visible" :width="width"
    :close-on-click-modal="false" @close="Cancel">
    //预留插槽，根据自己的需求添加内容
    <slot></slot>
    <span slot="footer" class="dialog-footer">
      <el-button @click="Cancel">{{$t('main.cancel')}}</el-button>
      <el-button type="primary" @click="Save">{{$t('main.confirm')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    dialogTitle: {
      type: String,
      default: "标题"
    },
    dialogVisible: {
      type: Boolean,
      default () {
        return false;
      }
    },
    width: {
      type: String,
      default () {
        return "60%";
      }
    },
  },
  computed: {
    visible: {
      get () {
        return this.dialogVisible;
      },
      set (val) {
        this.$emit("updateVisible", val);
      }
    }
  },
  methods: {
    Cancel () {
      this.$emit("cancel");
    },
    Save () {
      this.$emit("save");
    }
  }
};
</script>

2.父组件使用该组件

<el-button @click="show" type="primary">点击显示弹框</el-button>
<mydialog :dialogTitle="dialogTitle" :dialogVisible="dialogVisible" :width="'70%'" @updateVisible="updateVisible" @cancel="cancel" @save="save">
      <p>预留的插槽位置</p>
</mydialog>

data(){
    return{
        dialogTitle: "Detail",
        dialogVisible: false,
    }
}

methods: {
    updateVisible(val) {
      this.dialogVisible = val;
    },
    cancel() {
      //  这里可重置数据
      this.dialogVisible = false;
    },
    save() {
      //这里向后台 提交数据
      this.dialogVisible = false;
    },
    show() {
      this.dialogVisible = true;
    }
  }
};