AkkomaGang/admin-fe
5
2
Fork 8
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

refactor: tabsview

Browse source
This commit is contained in:
Pan 2017-10-23 13:45:09 +08:00
parent 18ec63d238
commit e762056e80
1 changed files with 67 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/views/layout/components/TabsView.vue
View file

@ -1,9 +1,8 @@
<template>
<div class='tabs-view-container'>
<router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
<el-tag :closable="true" :type="isActive(tag.path)?'primary':''" @close='closeViewTabs(tag,$event)'>
<router-link class="tabs-view-item" :class="isActive(tag.path)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
{{tag.name}}
</el-tag>
<span class='el-icon-close' @click='closeViewTabs(tag,$event)'></span>
</router-link>
</div>
</template>
@ -15,6 +14,9 @@ export default {
return this.$store.state.app.visitedViews.slice(-6)
}
},
mounted() {
this.$store.dispatch('addVisitedViews', this.generateRoute())
},
methods: {
closeViewTabs(view, $event) {
this.$store.dispatch('delVisitedViews', view).then((views) => {
@ -52,12 +54,70 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.tabs-view-container {
.tabs-view-container {
background: #fff;
height: 34px;
line-height: 34px;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
.tabs-view-item {
display: inline-block;
vertical-align: top;
position: relative;
height: 32px;
line-height: 32px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 12px;
font-size: 12px;
margin-left: 10px;
.tabs-view {
margin-left: 10px;
&:first-of-type {
margin-left: 0px;
}
&.active {
border-bottom: 0px;
&::before {
content: '';
background: #20a0ff;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
}
&:hover {
// border-color: #20a0ff;
// color: #20a0ff;
}
}
}
</style>
<style rel="stylesheet/scss" lang="scss">
.tabs-view-container {
.tabs-view-item {
.el-icon-close {
width: 16px;
height: 16px;
vertical-align: 2px;
border-radius: 50%;
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
color: #fff;
}
}
}
}
</style>