forked from AkkomaGang/admin-fe
add view tabs
This commit is contained in:
parent
7549eb8044
commit
91cb0ac5ca
3 changed files with 39 additions and 1 deletions
|
@ -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,
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue