需求: vue項(xiàng)目中,點(diǎn)擊左側(cè)菜單,tags頁(yè)顯示當(dāng)前打開(kāi)的菜單,并且高亮顯示當(dāng)前菜單

實(shí)現(xiàn)效果:

實(shí)現(xiàn)代碼:在vuex里面定義tags存放所有打開(kāi)的菜單,和當(dāng)前打開(kāi)的索引curtagsIndex:,通過(guò)遍歷tags,看是否等于當(dāng)前索引

1.在store的index.js文件里面定義tags和curtagsIndex

const store = new Vuex.Store({modules: {tags:[],curTagsIndex:"-1",},mutations: {SET_CURTAGS: (state, index) => {state.curTagsIndex = index},} })

?

<div class="tag_list" v-for="(tag,index) in tags" @click="jump(tag)" :class="{ active:curTagsIndex == index}"><span>{{tag.name}}</span><i class="el-icon-close" @click="close(tag)"></i></div><script>import { mapState, mapGetters,mapMutations } from "vuex";export default{ computed: {...mapGetters(["tags","curTagsIndex"]),},methods:{...mapMutations(["SET_CURTAGS"]),jump(val){this.$router.push(val.path);this.tags.forEach((item,index)=>{if(item.name==val.name){this.$store.commit("SET_CURTAGS",index);}})},},} </script> <style lang="less" scoped>.active{background:#f1f4f5;}</style>

?

轉(zhuǎn)載于:https://www.cnblogs.com/xieli26/p/9947231.html

總結(jié)

以上是生活随笔為你收集整理的element-ui中点击菜单,改变当前菜单背景颜色的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。