vue3 二次封装element-plus的弹框el-dialog，增加了最小化、弹出位置 title字体色、header背景色、关闭图标色等功能

一、利用一个小时简单二次封装了element-plus的弹框el-dialog，根据项目需求主要增加了最小化、最小化icon、弹出位置、 title字体色、header背景色、关闭图标色。

 

代码如下：

<template>
  <el-dialog
      v-bind="$attrs"
      :style="{marginLeft:offset[0],marginRight:offset[1]}"
      :modal="modal"
      :close-on-click-modal="closeOnClickModal"
      :custom-class="customClass"
      :width="setWidth"
      :show-close="false"
      :draggable="draggable"
  >
    <template #header="{ close, titleId, titleClass }">
      <slot name="header" v-if="$slots.header" :header='{ close, titleId, titleClass,showClose }'></slot>
      <div class="flex jc-between ai-center" v-else>
        <h4 :id="titleId" :class="titleClass" font="16" :style="{color:titleColor,width:'calc(100% - 40px)'}">{{ title }}</h4>
        <div align="right">
          <el-icon :color="maxminIconColor" class="cursor-p" v-if="maxmin" @click="maxminFun">
            <component :is="isMimIcon"></component>
          </el-icon>
          <el-icon :color="closeIconColor" class="ml-10 cursor-p" v-if="showClose" @click="close">
            <CloseBold/>
          </el-icon>
        </div>
      </div>
    </template>
    <slot/>
    <slot name="footer"></slot>
  </el-dialog>
</template>

<script>
import {ref, toRefs, onMounted, nextTick} from "vue";

export default {
  name: "ElDialogSp",
  props: {//没用注释的属性是默认值改变了
    draggable: {
      type: Boolean,
      default: true
    },
    modal: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    customClass: {
      type: String,
      default: "el_dialog__sp"
    },
    title: {
      type: String,
      default: "提示"
    },
    width: {
      type: String,
      default: "500px"
    },
    headerBgColor: { //头部背景色
      type: String,
      default: ""
    },
    titleColor: { //头部提示字体颜色
      type: String,
      default: "#fff"
    },
    closeIconColor: { // 关闭icon颜色
      type: String,
      default: "#fff"
    },
    maxminIconColor: { // 最大最小化icon颜色
      type: String,
      default: "#fff"
    },
    maxmin: {//最小化 最大化按钮
      type: Boolean,
      default: true
    },
    offset: {//位置左 、右 auto 、auto是el-dialog默认值 左的权重大于右权重 左>右 当设置靠右弹出时 左参数要设置auto
      type: Array,
      default: ["auto", "auto"]
    },
    mimIcon: {//最小化icon
      type: String,
      default:"Minus"
    }
  },
  emits: ["maxminFun", "reductionFun"],// 最小化和还原回调
  setup(props, {emit}) {
    const isMimIcon = ref(props.mimIcon);
    const setWidth = ref(props.width);
    const maxminFun = () => {
      let bodyStyle = document.querySelector('.' + props.customClass + ' .el-dialog__body');

      if (isMimIcon.value == "Minus") {
        bodyStyle.style.display = "none";
        isMimIcon.value = "FullScreen";
        setWidth.value = "300px";
        emit("maxminFun");
      } else {
        bodyStyle.style.display = "block";
        isMimIcon.value = "Minus";
        setWidth.value = "500px";
        emit("reductionFun");
      }

    }
    onMounted(() => {
      nextTick(() => {
        let headerStyle = document.querySelector('.' + props.customClass + ' .el-dialog__header');
        headerStyle.style.backgroundColor = props.headerBgColor;
      })

    })

    return {
      maxminFun,
      isMimIcon,
      setWidth,
      ...toRefs(props)
    }
  }
}
</script>
<style>
.el-dialog__header { 
  margin-right: 0;
}
</style>

注：这只是初步简单vue3   demo

　　

 

    注意： 封装本质：不是破坏原有的组件的属性、方法、插槽等同时增加所需功能。如有问题欢迎一起探讨