**
vue的侧边工具栏,万年伸手党的良心发现
VueBar
<template>
<div class="NavBar">
<div class="NavBar-row" v-for="(item,index) in NavBarListData" :key="index"
@mouseover="item.showChildren = true"
@mouseout="item.showChildren = false">
<div class="row-content">
<div class="row-title">
<div class="row-title-icon"></div>
</div>
<div class="row-main">
<div class="row-title-text">{{item.titleText}}</div>
<div class="row-num">{{item.num}}</div>
</div>
<!-- <transition name="el-zoom-in-right" :duration="{ enter: 500, leave: 80 }"> -->
<div class="NavBar-row-chidren" v-if="item.showChildren">
<div class="chidren-row" v-for="(citem,cindex) in item.children" :key="cindex">
<div class="chidren-row-select">
<el-checkbox v-model="citem.select"></el-checkbox>
</div>
<div class="chidren-row-text">
{{citem.name}}
</div>
</div>
</div>
<!-- </transition> -->
</div>
</div>
</div>
</template>
<script>
import VueBaseWidget from "hugegis/VueBaseWidget";
export default {
name: "NavBar",
mixins: [VueBaseWidget],
components: {
},
data() {
return {
NavBarListData:[
{
titleIcon:"",
titleText:"报警事件",
num:"282",
showChildren:false,
children:[{
select:true,
name:"自控报警"
},{
select:true,
name:"安防报警"
}]
},
{
titleIcon:"",
titleText:"人员总览",
num:"282",
showChildren:false,
children:[]
},
{
titleIcon:"",
titleText:"厂区车辆",
num:"282",
showChildren:false,
children:[]
},
{
titleIcon:"",
titleText:"安防监控",
num:"282",
showChildren:false,
children:[]
},
{
titleIcon:"",
titleText:"自控系统",
num:"282",
showChildren:false,
children:[]
},
{
titleIcon:"",
titleText:"智能配电",
num:"282",
showChildren:false,
children:[]
},
{
titleIcon:"",
titleText:"管线总览",
num:"282",
showChildren:false,
children:[]
},
{
titleIcon:"",
titleText:"资源管理",
num:"282",
showChildren:false,
children:[]
},
{
titleIcon:"",
titleText:"主要指标",
num:"282",
showChildren:false,
children:[]
}
]
}
},
computed: {
},
watch:{
},
methods: {
},
created() {},
mounted() {
}
};
</script>
<style scoped>
.NavBar{
background: rgba(23,52,102,0.90);
border: 1px solid #136AE9;
border-radius: 10px;
position: fixed;
right: 30px;
top: 100px;
width: 336px;
height: auto;
color: white;
border-radius: 10px;
padding: 15px 0;
}
.NavBar-row{
padding: 0 40px; font-size: 18px;
cursor: pointer;
position: relative;
}
.NavBar-row:hover{
background: #0d2550;
}
.row-content{
display: flex;
justify-content: space-between;
align-items: center;
}
.row-title{
display: flex;
align-items: center;
}
.row-title-icon{
width: 40px; height: 40px; background-color: black;
margin-right: 20px;
}
.row-num{
color:greenyellow;
}
.row-main{
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
width: calc(100% - 60px);
border-bottom: 1px solid #1D4C95;
}
.NavBar-row:nth-last-child(1) .row-main{
border-bottom: none;
}
.NavBar-row-chidren{
position: absolute;
opacity: 0.8;
background: #173466;
border: 1px solid #2863C8;
min-width: 160px; right: 100%;
padding: 10px 0;
top: 0;
}
.chidren-row{
display: flex; justify-content: start; align-items: center; padding: 0 20px; font-size: 16px;
}
.chidren-row-text{
padding: 10px 0;
border-bottom: 1px solid #1D4C95;
width: calc(100% - 47px); text-align: center
}
.chidren-row:nth-last-child(1) .chidren-row-text{
border-bottom: none;
}
.chidren-row-select{
margin-right: 20px;
}
</style>
拿走不要客气。~~~~