vue+element实现tagsView功能

.tags-view-wrapper{背景：#fff;高度：54px；border-bottom:1pxsolid#d8dce5;框阴影：01px3px0rgba(0,0,0,.12),003px0rgba(0,0,0,.04);}.tags-view-item{显示：内联块；位置：相对；高度：30px；行高：30px；边框：1px实心#d8dce5；颜色：#495060；背景：#fff；填充：08px；字体大小：12px；左边距：5px；顶部边距：4px；}.tags-view-item:first-of-type{margin-left:15px;}.tags-view-item.active{背景颜色：#42b983；颜色：#fff；边框颜色：#42b983；}.tags-view-item.active::before{内容：'';背景：#fff；显示：内联块；宽度：8px；高度：8px；边界半径：50%；位置：相对；顶部：-1px；右边距：2px；}.contextmenu{保证金：0;背景：#fff；z-指数：100；位置：绝对；列表样式类型：无；填充：5px0；边界半径：4px；字体大小：12px；字体粗细：400；颜色：#333；盒子阴影：2px2px3px0rgba(0,0,0,.3);}.contextmenuli{保证金：0;填充：7px16px;游标：指针；}.contextmenuli:hover{背景：#eee;}.tags-view-item.el-icon-close{宽度：16px；高度：16px；边界半径：50%；文本对齐：居中；过渡：所有.3s立方贝塞尔(.645,.045,.355,1)；变换原点：100%50%；}.el-icon-close:before{转换：scale(.6);显示：内联块；}vue+element成功实现tagsView功能。examplevuexstore存储浏览过的菜单；目录结构//NewtagsView.jsconsttagsView={state:{visitedViews:[],cachedViews:[]},mutations:{ADD_VISITED_VIEWS:(state,view)=>{if(state.visitedViews.some(v=>v.path===view.path))returnstate.visitedViews.push(Object.assign({},view,{title:view.meta.title||'no-name'}))if(!view.meta.noCache){state.cachedViews.push(view.name)}},DEL_VISITED_VIEWS:(state,view)=>{for(const[i,v]ofstate.visitedViews.entries()){if(v.path===view.path){state.visitedViews.splice(i,1)break}}for(constiofstate.cachedViews){if(i===view.name){constindex=state.cachedViews.indexOf}(i)state.cachedViews.splice(index,1)中断}}},DEL_OTHERS_VIEWS:(state,view)=>{for(const[i,v]ofstate.visitedViews.entries()){if(v.path===view.path){state.visitedViews=state.visitedViews.slice}(i,i+1)break}}for(constiofstate.cachedViews){if(i===view.name){constindex=state.cachedViews.indexOf(i)state.cachedViews=state.cachedViews。slice(index,i+1)break}}},DEL_ALL_VIEWS:(state)=>{state.visitedViews=[]state.cachedViews=[]}},actions:{addVisitedViews({commit},view){提交('ADD_VISITED_VIEWS',view)},delVisitedViews({commit,state},view){returnnewPromise((resolve)=>{commit('DEL_VISITED_VIEWS',view)resolve([...state.visitedViews])})复制代码},delOthersViews({commit,state},view){返回newPromise((resolve)=>{commit('DEL_OTHERS_VIEWS',view)resolve([...state.visitedViews])})},delAllViews({commit,state}){returnnewPromise((resolve)=>{commit('DEL_ALL_VIEWS')resolve([...state.visitedViews])})}}}exportdefaulttagsViewfolderstoreindex.jsimport新建的tagsView.js，放入modules模块中导入tagsViewfrom'./modules/tagsView'//Previousstate,mutations,getters,actions...省略modules:{tagsView}新建一个tagsView文件夹(index.vue,scrollPane.vue)目录结构自己定，我放它在组件的公共文件夹中；//index.vue.tags-view-wrapper{背景：#fff;高度：54px；border-bottom:1pxsolid#d8dce5;框阴影：01px3px0rgba(0,0,0,.12),003px0rgba(0,0,0,.04);}.tags-view-item{显示：内联块；位置：相对；高度：30px；行高：30px；边框：1px实心#d8dce5；颜色：#495060；背景：#fff；填充：08px；字体大小：12px；左边距：5px；顶部边距：4px；}.tags-view-item:first-of-type{margin-left:15px;}.tags-view-item.active{背景颜色：#42b983；颜色：#fff；边框颜色：#42b983；}.tags-view-item.active::before{内容：'';背景：#fff；显示：内联块；宽度：8px；高度：8px；边界半径：50%；位置：相对；顶部：-1px；右边距：2px；}.contextmenu{保证金：0;背景：#fff；z-指数：100；位置：绝对；列表样式类型：无；填充：5px0；边界半径：4px；字体大小：12px；字体粗细：400；颜色：#333；盒子阴影：2px2px3px0rgba(0,0,0,.3);}.contextmenuli{保证金：0;填充：7px16px;游标：指针；}.contextmenuli:hover{背景：#eee;}.tags-view-item.el-icon-close{宽度：16px；高度：16px；边界半径：50%；文本对齐：居中；过渡：所有.3s立方贝塞尔(.645,.045,.355,1)；变换原点：100%50%；}.el-icon-close:before{转换：scale(.6);显示：内联块；}//ScrollPane.vue.scroll-container{white-space:nowrap;位置：相对；溢出：隐藏；宽度：100%；}.scroll-wrapper{位置：绝对；顶部：8px；注意：注意文件导入的路径；router.js路由应该添加meta,name