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

一路追求匠人精神

已于 2022-10-25 15:32:30 修改

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript vue.js

于 2022-09-23 17:08:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36566924/article/details/127014145

前端专栏收录该内容

115 篇文章

订阅专栏

本文介绍了一个可定制的E-dialog组件，支持动态内容展示、显示/隐藏控制、自定义footer以及开放/关闭/确认操作的钩子。通过实例代码演示了如何在Vue中使用该组件进行银行账号表单的弹窗操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

二.入参和反参

入参：

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>