tag面包屑vuex

tags数据从vuex来。
:closable=“item.name!==‘home’” 不是home的有删除按钮。
:effect 主题高亮显示，是哪个route路由就高亮哪个item为plain。
@click="changMenu(item)"为点击面包屑触发的事件，去跳转路由显示页面。
@close="handleClose(item,index)"为删除面包屑，实现前端页面的删除，更新vuex中数据： this.close(tag)，并且删除后路由应该跳转去何处。

        <el-tagsize="small"v-for="(item,index) in tags" :key="item.name":closable="item.name!=='home'":effect="$route.name === item.name ? 'dark':'plain'"@click="changMenu(item)"@close="handleClose(item,index)">{{item.label}}</el-tag>

tags数据从vuex来

import { mapState ,mapMutations} from 'vuex'computed:{...mapState({tags:state=>state.tab.tabsList})},...mapMutations({close:'closeTag'})

跳转

            //点击tag标签时 跳转到对应路由changMenu(item){this.$router.push({name:item.name})},

删除面包屑，更新vuex，路由跳转

            // 关闭某个面包屑handleClose(tag,index){const len = this.tags.length - 1this.close(tag)//在这里vuex数据数组已经删除//点击删除的tag不是当前的tag  所以不影响当前高亮的路由显示,不需要改变当前聚焦的焦点if(tag.name!==this.$route.name){return}//则判断删除的是当前tag的情况   有两种//当前tag 是最右边的   焦点则往左移动if(index === len){//如果是最后一个  数组除掉后，len会改变，而index值并不会改变，所以要减1才是新的数组最后一个this.$router.push({name:this.tags[index-1].name})}else{//当前tag在中间位置，不是最后，把它关闭后，焦点随之指向它的下一个//其实把当前的tag删后，数组除掉后，后面的自然而然承接这个indexthis.$router.push({name:this.tags[index].name})}},

CommonTags.vue:

<template><div class="tabs"><el-tagv-for="(tag,index) in tags":key="tag.name":closable="tag.name!=='home'":effect="$route.name === tag.name ? 'dark' : 'plain' "@click="changeMenu(tag)"@close="handleClose(tag,index)"size="small">{{tag.label}}</el-tag></div>
</template><script>
import {mapState,mapMutations} from 'vuex'
export default {data(){return{}},computed:{...mapState({tags:state=>state.tab.tabsList})},methods:{...mapMutations({//取别名  可以使用this.close() close:'closeTag'}),//点击菜单就会跳转   item 是获取当前点击的changeMenu(item){this.$router.push({name:item.name})},// 参数是 v-for="(tag,index) in tags"的 handleClose(tag,index){const len = this.tags.length -1 //相当于调用 this.$store.commit("closeTag",tag.name)  (close是别名)//使用store this.close(tag) if(tag.name!==this.$route.name){// 关掉的不是当前路由 不需要改变当前焦点return;}//则判断删除的是当前tag的情况   有两种//当前tag 是最右边的   焦点则往左移动if(index ===len){//关闭的当前路由是最右侧的  焦点往左移动//最后一个 ，数组除掉后，len会改变，而index值并不会改变，所以要减1才是新的数组最后一个this.$router.push({ name:this.tags[index-1].name})}else{ //当前tag在中间位置，不是最后，把它关闭后，焦点随之指向它的下一个this.$router.push({name:this.tags[index].name})}}}
}
</script><style lang="less" scoped>.tabs{padding: 20px;.el-tag{margin-right: 15px;//箭头变小手cursor: pointer;}}
</style>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import tab from "./tab.js"
Vue.use(Vuex)
export default new Vuex.Store({modules: {tab,}
})

store/tab.js

export default{state:{tabsList:[{path:'/',name:'home',label:'首页',icon:'home'}],currentMenu:null},mutations:{// 面包屑： 在CommonAside左侧组件点击菜单栏组成的数组  selectMenu(state,value){if(value.name!=='home'){state.currentMenu = valueconst res = state.tabsList.findIndex(item=>item.name ===value.name)//不存在时 为 -1 所以添加if(res === -1){state.tabsList.push(value)}}else{//点击的是首页  设置为nullstate.currentMenu = null}},// 点击关闭某个面包屑时closeTag(state,val){//找到  表明要删除的这个存在const res = state.tabsList.findIndex(item=>item.name===val.name)//就把他删除state.tabsList.splice(res,1)}}
}

tag面包屑vuex相关推荐

面包屑的实现+tag功能实现+form表单
一面包屑实现打开VC/后台管理文件夹在store/tab.js页面: 在CommonAside页面添加红方框代码: CommonHeader页面添加红方框代码: CommonHeader页面添加 ...
【前端学习日记】ElementUi+导航菜单+面包屑+Tag标签联动
目录导航菜单的渲染路由跳转联动面包屑标签联动总结思路:导航菜单是负责路由跳转的,面包屑和Tags标签通过读取事件路由跳转的数据进行渲染,这里涉及到组件间通信,使用vuex状态管理器来管理这部 ...
Vue 封装面包屑（即粘即用）
效果展示(后台管理系统中常用) 如果你也需要如图所示的效果直接把下面的代码粘贴过去即可不需要父组件传递任何参数十分好用: 基本思路: 监听 $route 路由信息: 把当前的信息添加至数组,循环 ...
php面包屑导航实现思路,WordPress实现面包屑导航的方法
面包屑导航是一个很基本的功能,当网站结构复杂的时候,面包屑导航可以不让用户迷失方向.WordPress实现面包屑导航无非是安装插件,或者直接写代码.在网上看了不少介绍,有些代码感觉质量不高,插件也有很 ...
WordPress不可忽视的面包屑导航SEO优化技巧
什么是网站面包屑导航?面包屑导航意在告知用户所处的当前网页的位置,方便用户可以通过该导航快速返回上一级网页. 面包屑导航一般都在导航的下面,形式一般为首页 > 一级目录名称 > 二级目录 ...
面包屑导航 java_java面包屑导航制作
做了个简单的面包屑导航功能,比如页面上大家经常看到的这种导航: 您所在的位置:音乐社区-->用户模块-->用户注册我做成了标签的形式,利用jom4j来解析xml文件: 核心类SiteMa ...
php面包屑源码,ZBlogPHP面包屑导航的完整代码分享
面包屑导航的作用是不言而喻的,现在一般大大小小的网站都会做一个面包屑导航功能,这不仅有益于用户的体验,而且对于百度SEO优化来说也是比较重要的! 那么ZBlogPHP网站的面包屑导航该怎样写呢?在网上 ...
vue实战-面包屑的处理
vue实战-面包屑的处理 1.面包屑处理分类操作在Search路由模块下通过v-if来确定面包屑的存在,设置点击事件处理删除面包屑后的情况 <ul class="fl sui-ta ...
爱上MVC3系列~开发一个站点地图(俗称面包屑)
回到目录原来早在webform控件时代就有了SiteMap这个东西,而进行MVC时代后,我们也希望有这样一个东西,它为我们提供了不少方便,如很方便的实现页面导航的内容修改,页面导航的样式换肤等. 我 ...

tag面包屑vuex

tag面包屑vuex相关推荐

最新文章

热门文章