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

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

 

代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135

<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><br><br>注：这只是初步简单vue3   demo

　　

 

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