interru/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor:change tabs-view to tags-view

Browse source
This commit is contained in:
Pan 2017-11-22 11:21:09 +08:00
parent f2fcdee815
commit 3cb1e321d3
3 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/views/layout/Layout.vue
View file

@ -3,14 +3,14 @@
<sidebar class="sidebar-container"></sidebar> <sidebar class="sidebar-container"></sidebar>
<div class="main-container"> <div class="main-container">
<navbar></navbar> <navbar></navbar>
<tabs-view></tabs-view> <tags-view></tags-view>
<app-main></app-main> <app-main></app-main>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { Navbar, Sidebar, AppMain, TabsView } from 'views/layout/components' import { Navbar, Sidebar, AppMain, TagsView } from 'views/layout/components'
export default { export default {
name: 'layout', name: 'layout',
@ -18,7 +18,7 @@ export default {
Navbar, Navbar,
Sidebar, Sidebar,
AppMain, AppMain,
TabsView TagsView
}, },
computed: { computed: {
sidebar() { sidebar() {

22
src/views/layout/components/TabsView.vue → src/views/layout/components/TagsView.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<scroll-pane class='tabs-view-container'> <scroll-pane class='tags-view-container'>
<router-link class="tabs-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path"> <router-link class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path">
{{$t('route.'+tag.title)}} {{$t('route.'+tag.title)}}
<span class='el-icon-close' @click='closeViewTabs(tag,$event)'></span> <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
</router-link> </router-link>
</scroll-pane> </scroll-pane>
</template> </template>
@ -18,10 +18,10 @@ export default {
} }
}, },
mounted() { mounted() {
this.addViewTabs() this.addViewTags()
}, },
methods: { methods: {
closeViewTabs(view, $event) { closeViewTags(view, $event) {
this.$store.dispatch('delVisitedViews', view).then((views) => { this.$store.dispatch('delVisitedViews', view).then((views) => {
if (this.isActive(view.path)) { if (this.isActive(view.path)) {
const latestView = views.slice(-1)[0] const latestView = views.slice(-1)[0]
@ -40,7 +40,7 @@ export default {
} }
return false return false
}, },
addViewTabs() { addViewTags() {
const route = this.generateRoute() const route = this.generateRoute()
if (!route) { if (!route) {
return false return false
@ -54,19 +54,19 @@ export default {
}, },
watch: { watch: {
$route() { $route() {
this.addViewTabs() this.addViewTags()
} }
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.tabs-view-container { .tags-view-container {
background: #fff; background: #fff;
height: 34px; height: 34px;
border-bottom: 1px solid #d8dce5; border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tabs-view-item { .tags-view-item {
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 26px; height: 26px;
@ -105,8 +105,8 @@ export default {
</style> </style>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.tabs-view-container { .tags-view-container {
.tabs-view-item { .tags-view-item {
.el-icon-close { .el-icon-close {
width: 16px; width: 16px;
height: 16px; height: 16px;

2
src/views/layout/components/index.js
View file

@ -1,4 +1,4 @@
export { default as Navbar } from './Navbar' export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar/index.vue' export { default as Sidebar } from './Sidebar/index.vue'
export { default as TabsView } from './TabsView' export { default as TagsView } from './TagsView'
export { default as AppMain } from './AppMain' export { default as AppMain } from './AppMain'