<template>
|
<div class="headerBox">
|
<div
|
class="headBox"
|
:class="menuCheckFlg === item.id ? 'headBoxActive' : ''"
|
v-for="(item, index) in menuOption"
|
:key="index"
|
@click="setMenuChange(item)"
|
>
|
<img
|
class="itemImg"
|
:src="require(`../../assets/img/map/${item.image}`)"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
dataTypes: {
|
type: Array,
|
// 当为数组类型设置默认值时必须使用数组返回
|
default: function (value) {
|
return [];
|
}
|
}
|
},
|
data() {
|
return {
|
menuOption: this.dataTypes,
|
menuCheckFlg: null
|
};
|
},
|
methods: {
|
setMenuChange(res) {
|
this.menuCheckFlg = res.id;
|
if (res.id == "c2") {
|
this.$store.state.setScreenFlag = !this.$store.state.setScreenFlag;
|
}
|
}
|
},
|
watch: {
|
dataTypes(newValue, oldValue) {
|
if (newValue) {
|
this.menuOption = newValue;
|
this.menuCheckFlg = this.menuOption[0].id;
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.headerBox {
|
display: flex;
|
align-items: center;
|
}
|
.headBox {
|
border: 1px solid rgba(0, 0, 0, 0);
|
box-sizing: border-box;
|
margin-right: 20px;
|
border-radius: 10px;
|
display: flex;
|
align-items: center;
|
}
|
|
.headBoxActive {
|
border: 1px solid #797979;
|
background-color: #797979;
|
}
|
.headBox img {
|
width: 16px;
|
height: 13px;
|
margin: 5px;
|
}
|
</style>
|