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 = {
sidebar: state => state.app.sidebar,
visitedViews: state => state.app.visitedViews,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,

View file

@ -6,7 +6,8 @@ const app = {
opened: !+Cookies.get('sidebarStatus')
},
theme: 'default',
livenewsChannels: Cookies.get('livenewsChannels') || '[]'
livenewsChannels: Cookies.get('livenewsChannels') || '[]',
visitedViews: []
},
mutations: {
TOGGLE_SIDEBAR: state => {
@ -16,11 +17,25 @@ const app = {
Cookies.set('sidebarStatus', 0);
}
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: {
ToggleSideBar: ({ commit }) => {
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-else :to="item.path">{{item.name}}</router-link>
</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>
</template>
<script>
export default {
created() {
this.getBreadcrumb()
},
computed: {
visitedViews() {
return this.$store.state.app.visitedViews.slice(-6)
}
},
data() {
return {
levelList: null
@ -25,10 +36,18 @@
matched = [{ name: '首页', path: '/' }].concat(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: {
$route() {
this.addViewTabs();
this.getBreadcrumb();
}
}
@ -46,4 +65,7 @@
cursor:text;
}
}
.view-tabs{
margin-left: 10px;
}
</style>