首先定义一个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>