<!--主题菜单选项-->
|
<template>
|
<div class="menu-special">
|
<div style="color: white;z-index: 1000;display:inline-flex;">
|
<img class="menu-special-toggle" src="/assets/images/menu/earth.png"
|
style=""
|
@click="toggle()">
|
<div id="menu-special-context" class="menu-special-context">
|
<el-checkbox-button v-show="isShow" class="menu-special-item" v-model="topicSelectAll.check" :checked="topicSelectAll.checked" @change="checkedSpecialChangeAll(topicSelectAll)">
|
<div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="topicSelectAll.icon" ></div>
|
{{ topicSelectAll.name }}</el-checkbox-button>
|
|
<el-checkbox-group :indeterminate="isIndeterminate" v-show="isShow" v-model="topicCheckedList" size="medium" @change="checkedGroupSpecialChange">
|
<el-checkbox-button class="menu-special-item" v-for="item in topicList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
|
<div style="height: 1rem;width: 1rem;display: inline-flex;"> <img :src="item.icon" ></div>
|
{{item.name}}</el-checkbox-button>
|
</el-checkbox-group>
|
<!-- <ul class="menu-special-item" v-for="item in SpecialList" :key="item.id">-->
|
<!-- <li style="display: inline-flex;vertical-align: middle">-->
|
<!-- <div style="height: 1rem;width: 1rem;"> <img :src="item.icon" ></div>-->
|
|
<!-- <a>{{ item.name }}</a>-->
|
<!-- </li>-->
|
<!-- </ul>-->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { TopicSelectAll, TopicList } from '../../conf/Topic'
|
export default {
|
name: 'MenuTopic',
|
data () {
|
return {
|
isShow: false,
|
isIndeterminate: true,
|
topicCheckedList: [],
|
topicSelectAll: TopicSelectAll,
|
topicList: TopicList
|
}
|
},
|
computed: {
|
},
|
methods: {
|
toggle () {
|
this.isShow = !this.isShow
|
},
|
checkedGroupSpecialChange (val) {
|
const len = val.length
|
this.topicSelectAll.check = len === this.topicList.length
|
this.isIndeterminate = len > 0 && len < this.topicList.length
|
this.$store.commit('setTopic', this.topicCheckedList)
|
},
|
checkedSpecialChangeAll (val) {
|
this.topicCheckedList = val.check ? this.topicList.map(item => item.name) : []
|
this.isIndeterminate = false
|
this.$store.commit('setTopic', this.topicCheckedList)
|
},
|
checkedSpecialChange () {
|
console.log(this.topicCheckedList)
|
// this.$store.commit('setTopic', this.topicCheckedList)
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="less" >
|
@import '@assets/css/map/_map-variable';
|
.menu-special {
|
position: absolute;
|
left: 1rem;
|
bottom: 1rem;
|
|
z-index: 1000;
|
font-family: 'Arial Normal', 'Arial';
|
font-weight: 400;
|
font-style: normal;
|
.menu-special-toggle{
|
width: 2rem;height: 2rem;background-size: 100% 100%;padding-right: 1rem;display: inline; transition: all .6s;
|
|
}
|
.menu-special-toggle:hover{
|
cursor: pointer;
|
transform: scale(1.2)
|
}
|
|
.menu-special-context {
|
|
display: inline-flex;
|
transition: all 1s;
|
|
li {
|
//display: inline-flex;
|
|
line-height: 2rem;
|
height: 2rem;
|
img {
|
font-size: 0;
|
height: 100%;
|
width: 100%;
|
}
|
}
|
.menu-special-item {
|
background: url('/assets/images/menu/menu-background.svg') no-repeat;
|
background-size: 100% 100%;
|
padding: 0 1rem 0 1rem;
|
line-height: 2rem;
|
height: 2rem;
|
transition: all .5s;
|
}
|
.menu-special-item :hover {
|
text-decoration: underline;
|
cursor: pointer;
|
|
}
|
.menu-special-item:active{
|
color: @color-highlight;
|
}
|
}
|
.el-checkbox-button__inner{
|
padding: 0;
|
background: transparent;
|
//border: 1px solid @color;
|
color: @color;
|
line-height: 1rem;
|
box-shadow: none;
|
border:none;
|
|
}
|
.menu-special-item:hover{
|
transform: scale(1.1)
|
}
|
.el-checkbox-button__inner:hover{
|
|
}
|
.el-checkbox-button.is-checked .el-checkbox-button__inner {
|
color: @color-highlight;
|
background-color: transparent;
|
//border-color: transparent;
|
box-shadow: none;
|
border:none;
|
}
|
.el-checkbox-button:first-child .el-checkbox-button__inner{
|
border-left: none;
|
}
|
.el-checkbox-button--medium .el-checkbox-button__inner{
|
padding:0;
|
}
|
.el-checkbox-button__inner:hover{
|
color: @color-highlight;
|
}
|
.menu-special .menu-special-context .menu-special-item:hover{
|
|
}
|
}
|
</style>
|
