el-dialog的再封装(头部，尾部)_el-dialog__header

一.实现效果如下:(完整代码见底部)

 二.入参和反参

入参：
 
title:标题
show：控制显示和隐藏
customFooter：是否自定义底部操作栏
width：宽度
 
----可根据实际需求继续扩展----

反参：
 
this.$emit("openDlg");  提供打开窗口的钩子openDlg
this.$emit("staticCloseDlg");    提供关闭窗口的钩子staticCloseDlg
this.$emit("confirm");    提供点击确定的钩子confirm

 三.引用

<e-dialog
      @confirm="backAccConfirm"
      @staticCloseDlg="staticCloseDlg"
      :title="diaTitle"
      :show.sync="dialogVisible"
    >
      <bank-acc-form
        @closeDlg="closeDlg"
        ref="backAccForm"
        slot="content"
        :oriForm="oriForm"
      ></bank-acc-form>
    </e-dialog>

四.完整代码

<template>
  <div class="e-dialog">
    <el-dialog
      :title="title"
      @close="staticCloseDlg"
      :width="width"
      :visible.sync="display"
      :close-on-click-modal="false"
    >
      <transition name="slide-fade" mode="out-in">
        <slot name="content" v-if="display"></slot>
      </transition>
      <!-- footer -->
      <div slot="footer" v-if="!customFooter">
        <el-button size="small" type="primary" icon="el-icon-check" @click="confirm">确定</el-button>
        <el-button size="small" class="cancel-btn" icon="el-icon-close" @click="cancel"
          >取消</el-button
        >
      </div>
      <div v-else slot="footer">
        <slot name="footer"></slot>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  name: "e-dialog",
  props: {
    title: {
      //标题
      type: String,
      default: "title",
    },
    show: {
      //显隐
      type: Boolean,
      default: false,
    },
    customFooter: {
      //是否自定义footer
      type: Boolean,
      default: false,
    },
    width: {
      //是否自定义footer
      type: String,
      default: "50%",
    },
  },
  watch: {
    show: function (newValue) {
      this.display = newValue; // show改变是同步子组件display的值
      if (newValue) {
        this.$emit("openDlg"); //打开弹窗的时候,抛出一个钩子用于外部组件预处理
      }
    },
    display: function (newValue) {
      this.$emit("update:show", newValue); // display改变时同步父组件show的值
    },
  },
  data() {
    return {
      display: false,
    };
  },
  methods: {
    cancel() {
      this.display = false;
    },
    staticCloseDlg() {
      this.$emit("staticCloseDlg");
    },
    confirm() {
      //点击确定的关闭事件是通过父节点进行处理
      this.$emit("confirm");
    },
  },
};
</script>
 
<style scoped lang="scss">
.e-dialog {
  .slide-fade-enter-active {
    transition: all 0.3s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
    // transform: translateX(100px);
    opacity: 0;
  }
  /deep/.el-dialog {
    border-radius: 8px;
  }
 
  /deep/.el-dialog__body {
    padding: 10px 40px !important;
  }
 
  /deep/.el-dialog__header {
    background: #1d78d5;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
 
  /deep/.el-dialog__title {
    color: white;
  }
 
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: white !important;
  }
}
</style>