注意点:
1.要完成高亮效果在<a-tag>组件上 加上 :color="t.isChecked? '#2db7f5':'#87d068'",当选中标签的时候给所以标签添加一个 isChecked属性,默认为false,选中时在更为true
2.添加isChecked属性时,要用this.$set 因为数据有时是从Vuex取出来的,不是响应式的不会立即生效。
3.跳转路由时要判断是否为最后一个,所以要根据数组的长度以及点击时所在的下标来判断
4.将整个<a-tag>分装成一个公共组件方便调用
<template><div><a-tag :color="t.isChecked? '#2db7f5':'#87d068'" v-for="(t,index) in tagsList" :key="t.path":closable="t.label !== '首页'"@close="closeHandle(t,index)" @click="handleChange(t)">{{ t.label }}</a-tag></div>
</template><script>
import {mapState} from 'vuex'export default {name: '',data() {return {};},created() {},mounted() {},components: {},computed: {...mapState('t', ['tagsList']),},methods: {closeHandle(val, index) {const t_index = this.tagsList.findIndex((item) =>item.path === val.path)this.tagsList.splice(t_index, 1)const length = this.tagsList.lengthif (this.$route.path !== val.path) {return}if (index === length) {const path_one = this.tagsList[index - 1].paththis.$router.push(path_one)} else {const path_two = this.tagsList[index].paththis.$router.push(path_two)}},handleChange(val) {this.addChecked()this.tagsList.forEach(item=>{if(val.path === item.path){this.$set(item,'isChecked',!item.isChecked)}})if (this.$route.path !== val.path && !(this.$route.path === '/home' && val.path === '/')) {this.$router.push(val.path)}},addChecked() {this.tagsList.forEach((item) => {this.$set(item, 'isChecked', false);})}}
}
</script><style scoped lang="less">
.ant-tag {font-size: 16px;padding: 4px;
}
</style>