需求: vue項目中,點擊左側菜單,tags頁顯示當前打開的菜單,并且高亮顯示當前菜單

實現效果:

實現代碼:在vuex里面定義tags存放所有打開的菜單,和當前打開的索引curtagsIndex:,通過遍歷tags,看是否等于當前索引

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>

?

轉載于:https://www.cnblogs.com/xieli26/p/9947231.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。