如何高效二次封装Element UI弹窗

首先定义一个Element UI 组件，并且二次封装它。

<template>
  <el-dialog :visible.sync="visible" width="30%" :show-close="false" :custom-class="'dialog-box'">
    <slot name="header">
      <p class="tit">{
   
   { tit }}<span class="close" @click="closeView">关闭</span></p>
    </slot>
    <slot></slot>
  </el-dialog>
</template>

<script>
export default {
      
      
  name: 'Dialogbox',
  props: {
      
      
    tit: String,
    status: Boolean,
  },
  computed: {
      
      
    visible: {
      
      
      get() {
      
      
        return this.status;
      },
      set(val) {
      
      
        this.$emit('update:status', val); // visible 改变的时候通知父组件
      },
    },
  },
  methods: {
      
      
    closeView() {
      
      
      this.$emit('update:status', false);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .dialog-box {
      
      
  background: #ffffff;
  border-radius: 10px;
  .tit {
      
      
    position: relative;
    text-align: center;
    font-size: 20px;
    font-family: 'PuHuiTi';
    font-weight: 400;
    color: #333333;
    .close{
      
      
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 3.5px;
    }
  }
  .el-dialog__header {
      
      
    display: none;
  }
}
</style>

然后，使用它。

<template>
<dialogbox :tit="'能耗占比排行'" :status.sync="rankingEnergyBoxView">
 <template>
   <div class="ranking-energy-box">
     <div class="ranking-energy"></div>
   </div>
 </template>
</dialogbox>
</template>
<script>
import Dialogbox from '@/components/Dialogbox';
export default {
      
      
	name:'Dialogbox',
	components:{
      
      
		Dialogbox 
	},
	data(){
      
      
		return {
      
      
			rankingEnergyBoxView: true
		}
	}
}
</script>

有不理解的随时VX联系 ：maomin9761