vue使用el-tabs实现标签页（内存+vuex）

vue使用el-tabs实现标签页（内存+vuex）
效果图：
1：

2：

3：内存中

这是一个组件，例如：pageTabs.vue（组件是可以做到独立监听路由变化的，所以不需要外部调用什么内部的方法，所以可以抽离成为一个组件），监听路由改变进行新增标签，以及el-tabs组件的切换，删除

代码：

<template><div class="page-tabs-index"><el-tabs v-model="activeRoute" type="card" :closable="closable" @tab-click="clickTab" @edit="handleTabsEdit"><el-tab-pane:key="index"v-for="(item, index) in tabs":label="item.title":name="item.route"><span slot="label" @click.middle="removeTabByMiddle(item.route)">{{item.title}}</span></el-tab-pane></el-tabs></div>
</template><script>export default {data(){return{closable: false,activeRoute:'',tabs:[]}},methods:{// 增删tabshandleTabsEdit(targetName,action){// console.log('tab增删:',targetName,action);if(action === 'remove'){this.methods('removeTab',targetName);this.methods('checkClosable');}},// 鼠标中键删除removeTabByMiddle(route){if(this.closable){this.methods('removeTab',route);this.methods('checkClosable');}},// 点击tab,item是被选中的标签的vue实例clickTab(item){if(this.$route.name === item.name){return ;}// console.log('tab切换：', item.name);this.$router.push({name:item.name})},// 这里需要配合keep-alive的includeAPI，设置vuex的缓存list，以实现tab关闭后vue不缓存该页面// 加载tabs缓存loadTabs() {const pageTabs = sessionStorage.getItem('page-tabs');if (pageTabs) {this.tabs = JSON.parse(pageTabs);}this.$store.commit('setKeepAliveList',this.tabs.map(i=>i.route));},// tab切换更新updateTabs() {const route = this.$route.name;const title = route;if(!route || route === 'index'){// 这里是处理layout中第一次加载会是null，后续由监听$route更新，(index路由是引导用的，不需要)// 而如果是当从没有tabs的页面跳转过来时，不走下面，将不会变更当前激活return;}// 新增if (!this.tabs.find(i => i.route === route)) {this.tabs.push({ route, title });}this.activeRoute = route;// this.$route.meta.keepAlive = true;// 缓存tabssessionStorage.setItem('page-tabs', JSON.stringify(this.tabs));this.$store.commit('setKeepAliveList',this.tabs.map(i=>i.route));},// 移除tabremoveTab(route) {// 保存indexlet index = this.tabs.findIndex(i => i.route === route);this.tabs = this.tabs.filter(i => i.route !== route);this.$store.commit('setKeepAliveList',this.tabs.map(i=>i.route));// 如果删除的是当前的routeif (this.activeRoute === route) {// 将当前激活route切换为刚才删除的后一个if (index > this.tabs.length-1 ) {index -= 1 ;}this.activeRoute = this.tabs[index].route;// this.$route.meta.keepAlive = false;this.$router.push({ name: this.activeRoute });}// 缓存tabssessionStorage.setItem('page-tabs', JSON.stringify(this.tabs));},// 检查是否可以继续删除checkClosable() {this.closable = this.tabs.length > 1;}},created(){// this.lists = this.$store.state.other.houseList;},mounted(){this.loadTabs()this.updateTabs()this.checkClosable()},watch:{$route(){this.loadTabs()this.updateTabs()this.checkClosable()}}}
</script><style scoped lang="scss">
// 组件高度
$tabLineHeight:30px;
// 边框颜色
$borderColor: #488ba0;
// 未激活的以及tab本身的背景
$background: #09142e;
// 激活的标签的背景
$background-active: #488ba0;
// 未激活标签的字体颜色
$fontColor:#30c0cd;
.page-tabs-index{height: $tabLineHeight;::v-deep .el-tabs{}// 底部横线::v-deep .el-tabs__header{height: $tabLineHeight;background: $background;box-sizing: border-box;border-bottom: 1px solid $borderColor;}// 左右滚动按钮::v-deep .el-tabs__nav-prev {height: $tabLineHeight;line-height: $tabLineHeight;}::v-deep .el-tabs__nav-next {height: $tabLineHeight;line-height: $tabLineHeight;}::v-deep .el-tabs__nav{border-radius: 0;border-left: none;border-right: none;border-top: none ;}::v-deep .el-tabs__item{height: $tabLineHeight;line-height: $tabLineHeight;border-color: $borderColor;color: #fff;border-right: 1px solid $borderColor;//border-radius: 3px 3px 0 0;}// 左侧第一个::v-deep .el-tabs__item.is-active:first-child{border-left: none;}::v-deep .el-tabs__item:not(.is-disabled){color: $fontColor;border-left: none;border-top: 2px solid transparent;}::v-deep .el-tabs__item.is-active{border-bottom: 1px solid $background-active;border-top: 2px solid $borderColor;border-right: 1px solid $borderColor;background: $background-active;color: #fff;}
}
</style>

然后还需要创建一个vuex

export default {name: 'pageTabs',state: {keepAliveList:[],},mutations: {setKeepAliveList (state, list) {state.keepAliveList = list}}
}

然后就去入口页面引入使用即可，例如App.vue

<template><div id="app" class="biggbox"><pageTabs></pageTabs><!-- 中部 --><transition><router-view></router-view></transition></div>
</template>

还可以用keepAlive

<keep-alive :include="keepAliveList"><router-view ></router-view></keep-alive>

vue使用el-tabs实现标签页（内存+vuex）相关推荐

vue实现多个tab标签页的切换与关闭
1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理. 将vuex中的数据保存到sessionStorage中,避免 ...
vue实现单页面多标签页
不废话先上效果图实现上面的效果,主要是通过改变vue的路由机制实现的在router目录文件下新建TabRouter.js文件,添加以下内容 const route = Object.create( ...
vue的多标签页实现
记录一个vue的后台管理项目-多标签组件的实现: 效果图大概是这样的: 点击左侧的菜单栏,会打开相应的标签页,这些标签可以关闭,可以切换: 使用的框架是vue,使用的UI库是element,另外还使用 ...
034_Tabs标签页
1. Tabs标签页 1.1. Tabs标签页分隔内容上有关联但属于不同类别的数据集合. 1.2. Tabs Attributes 参数说明类型可选值默认值 value / v-model 绑 ...
标签页添加点击事件和拖拽事件
:draggable="true" 放在Tabs表示标签页可拖拽 @on-drag-drop="handleDragDrop" 给Tabs添加拖拽事件: cha ...
vue 循环tabs 标签页组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
vue 循环tabs 标签页组件_vue学习笔记--v-for循环标签页label并实现根据不同label表格切换...
目标:用标签页组件实现点击不同标签显示表格内容,标签页内lab le 和表格数据都是循环得到的. 效果如图: 2.png 首先实现pane 循环出header. v-model="tabK ...
Vue+ElementUI+Tabs实现选项卡|标签页|美化标签页面|局部替换样式|好看的标签页|选项卡
因为elementUI自带的标签页实在太丑了,所以给他美化了以下,样式截图如下 1.使用 css 父级选择器来限制样式覆盖的范围, 不然会全局修改的代码中最外层的样式 class="hom ...

vue使用el-tabs实现标签页（内存+vuex）

这是一个组件，例如：pageTabs.vue（组件是可以做到独立监听路由变化的，所以不需要外部调用什么内部的方法，所以可以抽离成为一个组件），监听路由改变进行新增标签，以及el-tabs组件的切换，删除

代码：

然后还需要创建一个vuex

然后就去入口页面引入使用即可，例如App.vue

还可以用keepAlive

vue使用el-tabs实现标签页（内存+vuex）相关推荐

最新文章

热门文章