'新增标签页切换功能'

src/components/common/Home.vue

@@ -2,8 +2,15 @@
     <div class="wrapper">
         <v-head></v-head>
         <v-sidebar></v-sidebar>
-        <div class="content" :class="{'content-collapse':collapse}">
+        <div class="content-box" :class="{'content-collapse':collapse}">
-            <transition name="move" mode="out-in"><router-view></router-view></transition>
+            <v-tags></v-tags>
+            <div class="content">
+                <transition name="move" mode="out-in">
+                    <keep-alive>
+                        <router-view></router-view>
+                    </keep-alive>
+                </transition>
+            </div>
         </div>
     </div>
 </template>
@@ -11,6 +18,7 @@
 <script>
     import vHead from './Header.vue';
     import vSidebar from './Sidebar.vue';
+    import vTags from './Tags.vue';
     import bus from '../common/bus';
     export default {
         data(){
@@ -19,7 +27,7 @@
             }
         },
         components:{
-            vHead, vSidebar
+            vHead, vSidebar, vTags
         },
         created(){
             bus.$on('collapse', msg => {

src/components/common/Tags.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="tags" v-if="showTags">
+        <ul>
+            <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
+                <router-link :to="item.path" class="tags-li-title">
+                    {{item.title}}
+                </router-link>
+                <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
+            </li>
+        </ul>
+        <div class="tags-close-box">
+            <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 size="small" 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>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                tagsList: []
+            }
+        },
+        methods: {
+            isActive(path) {
+                return path === this.$route.path;
+            },
+            // 关闭单个标签
+            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.path && this.$router.push(item.path);
+                }else{
+                    this.$router.push('/readme');
+                }
+            },
+            // 关闭全部标签
+            closeAll(){
+                console.log(1111);
+                this.tagsList = [];
+                this.$router.push('/readme');
+            },
+            // 关闭其他标签
+            closeOther(){
+                const curItem = this.tagsList.filter(item => {
+                    return item.path === this.$route.path;
+                })
+                this.tagsList = curItem;
+            },
+            // 设置标签
+            setTags(route){
+                const isExist = this.tagsList.some(item => {
+                    return item.path === route.path;
+                })
+                !isExist && this.tagsList.push({
+                    title: route.meta.title,
+                    path: route.path
+                })
+            },
+            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);
+        }
+    }
+
+</script>
+
+
+<style scoped>
+    .tags {
+        position: relative;
+        height: 40px;
+        overflow: hidden;
+        background: #fff;
+        padding-right: 120px;
+    }
+
+    .tags ul {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+    }
+
+    .tags-li {
+        float: left;
+        margin: 4px;
+        border-radius: 3px;
+        font-size: 12px;
+        overflow: hidden;
+        cursor: pointer;
+        height: 32px;
+        line-height: 32px;
+        border: 1px solid #e9eaec;
+        background: #fff;
+        padding: 0 5px 0 12px;
+        vertical-align: middle;
+        color: #666;
+        -webkit-transition: all .3s ease-in;
+        -moz-transition: all .3s ease-in;
+        transition: all .3s ease-in;
+    }
+
+    .tags-li:hover {
+        background: #f8f8f8;
+    }
+
+    .tags-li.active {
+        color: #fff;
+    }
+
+    .tags-li-title {
+        float: left;
+        max-width: 80px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 5px;
+        color: #666;
+    }
+
+    .tags-li.active .tags-li-title {
+        color: #fff;
+    }
+
+    .tags-close-box {
+        position: absolute;
+        right: 0;
+        top: 0;
+        box-sizing: border-box;
+        padding-top: 8px;
+        text-align: center;
+        width: 110px;
+        height: 40px;
+        background: #fff;
+        box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
+        z-index: 10;
+    }
+
+</style>

src/router/index.js

@@ -12,49 +12,58 @@ export default new Router({
         {
             path: '/readme',
             component: resolve => require(['../components/common/Home.vue'], resolve),
+            meta: { title: '自述文件' },
             children:[
                 {
                     path: '/',
-                    component: resolve => require(['../components/page/Readme.vue'], resolve)
+                    component: resolve => require(['../components/page/Readme.vue'], resolve),
+                    meta: { title: '自述文件' }
                 },
                 {
                     path: '/table',
-                    component: resolve => require(['../components/page/BaseTable.vue'], resolve)
+                    component: resolve => require(['../components/page/BaseTable.vue'], resolve),
+                    meta: { title: '基础表格' }
                 },
                 {
                     path: '/form',
-                    component: resolve => require(['../components/page/BaseForm.vue'], resolve)
+                    component: resolve => require(['../components/page/BaseForm.vue'], resolve),
+                    meta: { title: '基本表单' }
                 },
                 {
                     // 富文本编辑器组件
                     path: '/editor',
-                    component: resolve => require(['../components/page/VueEditor.vue'], resolve)    
+                    component: resolve => require(['../components/page/VueEditor.vue'], resolve),
+                    meta: { title: '富文本编辑器' }
                 },
                 {
                     // markdown组件
                     path: '/markdown',
-                    component: resolve => require(['../components/page/Markdown.vue'], resolve)     
+                    component: resolve => require(['../components/page/Markdown.vue'], resolve),
+                    meta: { title: 'markdown编辑器' }    
                 },
                 {
                     // 图片上传组件
                     path: '/upload',
-                    component: resolve => require(['../components/page/Upload.vue'], resolve)       
+                    component: resolve => require(['../components/page/Upload.vue'], resolve),
+                    meta: { title: '文件上传' }   
                 },
                 {
                     // vue-schart组件
                     path: '/charts',
-                    component: resolve => require(['../components/page/BaseCharts.vue'], resolve)   
+                    component: resolve => require(['../components/page/BaseCharts.vue'], resolve),
+                    meta: { title: 'schart图表' }
                 },
                 {
                     // 拖拽列表组件
                     path: '/drag',
-                    component: resolve => require(['../components/page/DragList.vue'], resolve)
+                    component: resolve => require(['../components/page/DragList.vue'], resolve),
+                    meta: { title: '拖拽列表' }
                 },
                 {
                     // 权限页面
                     path: '/permission',
                     component: resolve => require(['../components/page/Permission.vue'], resolve),
-                    meta: {permission: true}
+                    meta: { title: '权限测试', permission: true }
                 }
             ]
         },

static/css/color-dark.css

@@ -16,3 +16,7 @@
 .pure-button{
     background: #20a0ff;
 }
+.tags-li.active {
+    border: 1px solid #409EFF;
+    background-color: #409EFF;
+}

static/css/main.css

@@ -8,17 +8,19 @@ body{
     font-family:'PingFang SC', "Helvetica Neue",Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
 }
 a{text-decoration: none}
-.content{
+.content-box{
-    background: none repeat scroll 0 0 #f0f0f0;
     position: absolute;
     left: 250px;
     right: 0;
     top: 70px;
     bottom:0;
+    overflow-y: scroll;
+}
+.content{
+    background: none repeat scroll 0 0 #f0f0f0;
     width: auto;
     padding:40px;
     box-sizing: border-box;
-    overflow-y: scroll;
     -webkit-transition: left .3s ease-in-out;
     transition: left .3s ease-in-out;
 }

static/css/theme-green/color-green.css

@@ -20,3 +20,7 @@
     background-color: #00d1b2 !important;
     border-color: #00d1b2 !important;
 }
+.tags-li.active {
+    border: 1px solid #00d1b2;
+    background-color: #00d1b2;
+}