github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

'新增标签页切换功能'

pull/80/head
lin-xin 2018-04-18 15:39:58 +08:00
parent 6592cfde3a
commit 267dc854d8
6 changed files with 220 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/common/Home.vue
View File

@ -2,8 +2,15 @@
<div class="wrapper">
<v-head></v-head>
<v-sidebar></v-sidebar>
<div class="content" :class="{'content-collapse':collapse}">
<transition name="move" mode="out-in"><router-view></router-view></transition>
<div class="content-box" :class="{'content-collapse':collapse}">
<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 => {

161
src/components/common/Tags.vue Normal file
View File

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

27
src/router/index.js
View File

@ -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 }
}
]
},

38
static/css/color-dark.css
View File

@ -1,18 +1,22 @@
.header{
background-color: #242f42;
}
.login-wrap{
background: #324157;
}
.plugins-tips{
background: #eef1f6;
}
.plugins-tips a{
color: #20a0ff;
}
.el-upload--text em {
color: #20a0ff;
}
.pure-button{
background: #20a0ff;
.header{
background-color: #242f42;
}
.login-wrap{
background: #324157;
}
.plugins-tips{
background: #eef1f6;
}
.plugins-tips a{
color: #20a0ff;
}
.el-upload--text em {
color: #20a0ff;
}
.pure-button{
background: #20a0ff;
}
.tags-li.active {
border: 1px solid #409EFF;
background-color: #409EFF;
}

8
static/css/main.css
View File

@ -8,17 +8,19 @@ body{
font-family:'PingFang SC', "Helvetica Neue",Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
}
a{text-decoration: none}
.content{
background: none repeat scroll 0 0 #f0f0f0;
.content-box{
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;
}

4
static/css/theme-green/color-green.css
View File

@ -19,4 +19,8 @@
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
background-color: #00d1b2 !important;
border-color: #00d1b2 !important;
}
.tags-li.active {
border: 1px solid #00d1b2;
background-color: #00d1b2;
}