add view tabs

This commit is contained in:
Pan 2017-06-23 17:32:52 +08:00 committed by 花裤衩
parent 7549eb8044
commit 91cb0ac5ca
3 changed files with 39 additions and 1 deletions

View File

@ -1,5 +1,6 @@
const getters = { const getters = {
sidebar: state => state.app.sidebar, sidebar: state => state.app.sidebar,
visitedViews: state => state.app.visitedViews,
token: state => state.user.token, token: state => state.user.token,
avatar: state => state.user.avatar, avatar: state => state.user.avatar,
name: state => state.user.name, name: state => state.user.name,

View File

@ -6,7 +6,8 @@ const app = {
opened: !+Cookies.get('sidebarStatus') opened: !+Cookies.get('sidebarStatus')
}, },
theme: 'default', theme: 'default',
livenewsChannels: Cookies.get('livenewsChannels') || '[]' livenewsChannels: Cookies.get('livenewsChannels') || '[]',
visitedViews: []
}, },
mutations: { mutations: {
TOGGLE_SIDEBAR: state => { TOGGLE_SIDEBAR: state => {
@ -16,11 +17,25 @@ const app = {
Cookies.set('sidebarStatus', 0); Cookies.set('sidebarStatus', 0);
} }
state.sidebar.opened = !state.sidebar.opened; state.sidebar.opened = !state.sidebar.opened;
},
ADD_VISITED_VIEWS: (state, view) => {
if (state.visitedViews.includes(view)) return
state.visitedViews.push(view)
},
DEL_VISITED_VIEWS: (state, view) => {
const index = state.visitedViews.indexOf(view)
state.visitedViews.splice(index, 1)
} }
}, },
actions: { actions: {
ToggleSideBar: ({ commit }) => { ToggleSideBar: ({ commit }) => {
commit('TOGGLE_SIDEBAR') commit('TOGGLE_SIDEBAR')
},
addVisitedViews: ({ commit }, view) => {
commit('ADD_VISITED_VIEWS', view)
},
delVisitedViews: ({ commit }, view) => {
commit('DEL_VISITED_VIEWS', view)
} }
} }
}; };

View File

@ -4,14 +4,25 @@
<router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link> <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
<router-link v-else :to="item.path">{{item.name}}</router-link> <router-link v-else :to="item.path">{{item.name}}</router-link>
</el-breadcrumb-item> </el-breadcrumb-item>
<router-link class="view-tabs" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
<el-tag :closable="true" @close='closeViewTabs(tag,$event)'>
{{tag.name}}
</el-tag>
</router-link>
</el-breadcrumb> </el-breadcrumb>
</template> </template>
<script> <script>
export default { export default {
created() { created() {
this.getBreadcrumb() this.getBreadcrumb()
}, },
computed: {
visitedViews() {
return this.$store.state.app.visitedViews.slice(-6)
}
},
data() { data() {
return { return {
levelList: null levelList: null
@ -25,10 +36,18 @@
matched = [{ name: '首页', path: '/' }].concat(matched) matched = [{ name: '首页', path: '/' }].concat(matched)
} }
this.levelList = matched; this.levelList = matched;
},
closeViewTabs(view, $event) {
this.$store.dispatch('delVisitedViews', view)
$event.preventDefault()
},
addViewTabs() {
this.$store.dispatch('addVisitedViews', this.$route.matched[this.$route.matched.length - 1])
} }
}, },
watch: { watch: {
$route() { $route() {
this.addViewTabs();
this.getBreadcrumb(); this.getBreadcrumb();
} }
} }
@ -46,4 +65,7 @@
cursor:text; cursor:text;
} }
} }
.view-tabs{
margin-left: 10px;
}
</style> </style>