Vue多标签页后台管理系统

Posted 2023-05-03

参考技术A Tao Admin 是一套企业级的高颜值、高性能的通用型后台前端解决方案， 致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件， 进一步提升企业级后台产品设计研发过程中的『用户』和『设计者』的体验。

Tao Admin 在力求提供开箱即用的开发体验下，还提供了完整的脚手架， 涉及用户管理，权限管理，国际化，通用组件，工具包，网络请求等各个方面。 为后台管理系统中常见的方案提供了最佳实践来减少学习和开发成本。

在线地址

vue-tao-admin

前后端由https访问改为http访问

https://www.lingchen.kim/tao_admin_doc

博客地址： https://www.lingchen.kim/

如果觉得项目对你有帮助，麻烦给个star

丰富的布局模式可选择，布局和功能具有高可配性；

支持顶栏菜单和侧边栏菜单（侧边菜单自动响应顶栏菜单变化，支持动态菜单）；

漂亮的 UI、极致的用户体验和细节处理；

登录、用户管理、权限管理...

顶栏菜单和侧边栏菜单（支持自动响应，支持动态菜单）

可配置的菜单栏徽标

布局（经典布局，全响应式后期开发）

亮色 / 暗色 侧边栏

亮色 顶栏

浅色主题 / 深色主题

可折叠侧边栏

多页签

全局面包屑

更多布局可在线体验（右上角菜单项可动态预览各种配置）

支持内嵌页面

重载当前页面

动态路由支持自动重载

支持多级路由嵌套及菜单栏嵌套

分离路由与菜单设置

富文本编辑器

优秀的持久化存储方案

自定义登录重定向

路由级别鉴权

侧边栏菜单鉴权

功能块鉴权

功能点鉴权

鉴权指令

支持 Chrome、Safari、Firefox 等现代主流浏览器。

支持 IE10、IE11、Edge 浏览器（部分功能可能会有差异，部分 API 是 IE 无法通过 polyfill 支持的）。

vue中实现后台管理标签页

<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>