<template> <section> <div class="navTabList el-tabs__nav-scroll" id="tabsNav" v-if="showTags"> <ul class="nt-ul el-tabs__nav" id="tabsNavList"> <li v-for="(item,index) in tagsList" :class="{‘is-active‘: isActive(item.path)}" :key="index"> <router-link :to="item.path" class="tags-li-title"> {{item.title}} </router-link> <i class="el-tag__close el-icon-close" @click="closeTags(index)"></i></li> </ul> <div class="pull-right navTab_right"> <el-button-group> <el-button size="mini" icon="el-icon-arrow-left" @click="tabsPrev()"></el-button> <el-button size="mini" icon="el-icon-arrow-right" @click="tabsNext()"></el-button> </el-button-group> <el-dropdown @command="handleTags"> <el-button size="mini" type="primary"> 标签选项 <i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="other">关闭其他页面</el-dropdown-item> <el-dropdown-item command="all">关闭所有页面</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </div> </section> </template> <script> import bus from ‘./bus‘ export default { data() { return { tagsList: [], counter: ‘0‘ } }, methods: { tabsNext() { let tabNav = document.getElementById(‘tabsNav‘) let tabNavList = document.getElementById(‘tabsNavList‘) let tabNavW = tabNav.clientWidth let tabNavListW = tabNavList.clientWidth if (tabNavW < tabNavListW && this.counter + tabNavW - 210 < tabNavListW) { this.counter = parseInt(this.counter) + parseInt(tabNavW) - 210 tabNavList.style.transform = ‘translateX(‘ + ‘-‘ + this.counter + ‘px)‘ } else { } }, tabsPrev() { let tabNav = document.getElementById(‘tabsNav‘) let tabNavList = document.getElementById(‘tabsNavList‘) let tabNavW = tabNav.clientWidth if (tabNavW <= this.counter + tabNavW - 210) { this.counter = parseInt(this.counter) - parseInt(tabNavW) + 210 tabNavList.style.transform = ‘translateX(‘ + ‘-‘ + this.counter + ‘px)‘ } else if (this.counter !== 0) { this.counter = 0 tabNavList.style.transform = ‘translateX(‘ + ‘0‘ + ‘px)‘ } else { } }, isActive(path) { return path === this.$route.fullPath }, // 关闭单个标签 closeTags(index) { const delItem = this.tagsList.splice(index, 1)[0] const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1] if (item) { delItem.path === this.$route.fullPath && this.$router.push(item.path) } else { this.$router.push(‘/dashboard‘) } }, // 关闭全部标签 closeAll() { this.tagsList = [] this.$router.push(‘/dashboard‘) }, // 关闭其他标签 closeOther() { const curItem = this.tagsList.filter(item => { return item.path === this.$route.fullPath }) this.tagsList = curItem }, // 设置标签 setTags(route) { const isExist = this.tagsList.some(item => { return item.path === route.fullPath }) if (!isExist) { if (this.tagsList.length >= 99) { this.tagsList.shift() } this.tagsList.unshift({ title: route.meta.title, path: route.fullPath, name: route.matched[1].components.default.name }) } // bus.$emit(‘tags‘, this.tagsList) }, handleTags(command) { command === ‘other‘ ? this.closeOther() : this.closeAll() } }, computed: { showTags() { return this.tagsList.length > 0 } }, watch: { $route(newValue, oldValue) { this.setTags(newValue) } }, created() { this.setTags(this.$route) // 监听关闭当前页面的标签页 bus.$on(‘close_current_tags‘, () => { for (let i = 0, len = this.tagsList.length; i < len; i++) { const item = this.tagsList[i] if (item.path === this.$route.fullPath) { if (i < len - 1) { this.$router.push(this.tagsList[i + 1].path) } else if (i > 0) { this.$router.push(this.tagsList[i - 1].path) } else { this.$router.push(‘/dashboard‘) } this.tagsList.splice(i, 1) } } }) } } </script> <style scoped> .navTabList { padding-right: 210px; height: 34px; line-height: 34px; background: #f4f4f4; margin-bottom: 10px; font-size: 12px; background-color: white; box-shadow:0 5px 10px #ddd ; } .navTabList .nt-ul { float: left; margin: 0; padding: 0; list-style: none; } .navTabList .nt-ul li { display: inline-block; margin: 1px 5px 2px 1px; border-radius: 3px; font-size: 12px; overflow: hidden; cursor: pointer; height: 24px; line-height: 24px; border: 1px solid #e9eaec; background: #fff; padding: 2px 12px 0 12px; vertical-align: middle; color: #666; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .navTabList .nt-ul li:before { content: ‘‘; width: 1px; height: 23px; position: absolute; left: 0; top: 7px; border-right: 1px solid #e4e4e4; } .navTabList .nt-ul li:first-child:before { display: none; } .navTabList .nt-ul li i { position: relative; font-size: 12px; width: 0; height: 14px; vertical-align: middle; line-height: 15px; overflow: hidden; top: -1px; right: -10px; } .navTabList .nt-ul li i { width: 14px; } .navTabList .nt-ul li a { display: inline-block; color: #999; } .navTabList .nt-ul .is-active { padding: 0 13px; /*margin-top: 2px;*/ height: 30px; line-height: 30px; border-top-left-radius: 3px; border-top-right-radius: 3px; background: #409eff; font-weight: bold; color: white; } .navTabList .nt-ul .is-active a{ color: white; } .navTabList .nt-ul .is-active:before { display: none; } .navTabList .nt-ul .is-active + li:before { display: none; } .navTabList .nt-ul .is-active i { width: 14px; } .navTabList .navTab_right { position: absolute; height: 28px; right: 0; line-height: normal; padding: 3px 6px; background: white; box-shadow:0 5px 10px #ddd ; z-index: 2; } .navTabList .navTab_right .el-button-group { vertical-align: top; } .navTabList .el-button--mini { font-size: 12px; /*padding: 4px 6px;*/ } </style>
原文地址:https://www.cnblogs.com/wsjaizlp/p/10875669.html
时间: 2024-10-29 10:46:49