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>

原文地址:https://www.cnblogs.com/wsjaizlp/p/10875669.html

时间: 2024-10-29 10:46:49

vue中实现后台管理标签页的相关文章

vue+elementui搭建后台管理界面(3侧边栏菜单)

上一节搭好了主框架,但是标签页和侧边栏只是分别展示了各自的菜单,如何将二者联动起来? 定义路由规则:当有 children 属性时,从 children 里取出 path 填充到侧边栏,如: { path: '/', redirect: '/dashboard', name: 'Container', component: Container, children: [ {path: 'dashboard', name: '首页', component: Dashboard, }, {path:

vue中通过后台返回的只动态生成表单及提交

在crm系统中,页面中表单内容和表单提交的内容都是不固定的,特别是表单内容不确定:是根据后台的需要配置出来:前台根据接口返回:进行渲染,处理后进行提交,这样在vue中就会出现问题:因为vue中的数据是先渲染后使用:所有的数据必须先生命出来,所以这样就造成了这个问题: 解决方法: 1.在请求接口:渲染后台需要提交的表单字段的时候:先对所有的需要渲染和提交的表单字段进行遍历,然后存储到data中一个对象中,我写的对象是subParams,这样就可以把所有需要提交的字段提交到subparams中了:

使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项

导航栏到小屏幕的时候,我们的处理办法是隐藏为一个按钮.可是选项卡的标签页部分,我们的处理办法是加一个水平滚动条.但是加水平滚动条需要解决一个问题,就是宽度的问题,如果不设置宽度,他就会根据屏幕大小自适应,这样的话就会出现换行掉下去的情况,不会出现横向滚动条. 1.动态给ul设置宽度 遍历li元素求出所有的li的宽度和,这样就能动态给ul设置宽度. 2.给ul父盒子设置overflow-x:scroll;属性

vue中嵌套页面 iframe 标签

vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></iframe> src可以使用相对路径,也可使用服务器根路径http:localhost:8088/-等: <ifr

vue+elementui搭建后台管理界面

1 会话存储 使用html5的 sessionStorage 对象临时保存会话 // 保存会话 sessionStorage.setItem('user', username) // 删除会话 sessionStorage.removeItem('user', username) 2 将所有未登录会话重定向到 /login 用 vue-router 的 beforeEach 实现beforeEach 方法接收三个参数: to: Route: 即将要进入的目标 路由对象 from: Route:

Vue中的状态管理器 - Vuex

我们知道vue是组件式开发的,当你的项目越来越大后,每个组件背后的数据也会变得越来越难以理顺, 这个时候你就可以考虑使用vuex了. 备注: 官方建议小项目不要使用,引入vuex会带来新的概念和模式,这对于新手而言理解上本身有难度,而且小项目中vuex发挥的功效确实不怎么明显, 反而增加了开发难度,就像后端项目中常说的 过度设计. 说了这么多,下面介入正题(以下讲解需要一个空的vue项目,推荐使用 vue-cli 创建,快速搭建一个vue开发环境 ): vuex的作用就是作为一个数据仓库(sto

【转】vue中动态设置meta标签和title标签

因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name: 'Article', component: Article, meta: { t

利用cookie实现浏览器中多个标签页之间的通信

原理: cookie是浏览器端的存储容器,而且它是多页面共享的,利用cookie多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到cookie中),一个标签页接收消息(从cookie中获取消息) 例子:   01 发送消息的标签页(其实就是将要发送的消息设置到cookie中) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

DDD实践案例:引入事件驱动与中间件机制来实现后台管理功能

DDD实践案例:引入事件驱动与中间件机制来实现后台管理功能 一.引言 在当前的电子商务平台中,用户下完订单之后,然后店家会在后台看到客户下的订单,然后店家可以对客户的订单进行发货操作.此时客户会在自己的订单状态看到店家已经发货.从上面的业务逻辑可以看出,当用户下完订单之后,店家或管理员可以对客户订单进行跟踪和操作.上一专题我们已经实现创建订单的功能,则接下来自然就是后台管理功能的实现了.所以在这一专题中将详细介绍如何在网上书店案例中实现后台管理功能. 二.后台管理中的权限管理的实现 后台管理中,