perf[tags-view]:refine the style && format code
This commit is contained in:
Pan
parent
b6d97f1806
commit
4d3bbae183
2 changed files with 174 additions and 172 deletions
|
|
@ -30,17 +30,17 @@ const tagsView = {
|
|||
}
|
||||
}
|
||||
},
|
||||
DEL_OTHER_VIEWS: (state, view) => {
|
||||
DEL_OTHERS_VIEWS: (state, view) => {
|
||||
for (const [i, v] of state.visitedViews.entries()) {
|
||||
if (v.path === view.path) {
|
||||
state.visitedViews = [].concat(state.visitedViews.slice(i, i + 1))
|
||||
state.visitedViews = state.visitedViews.slice(i, i + 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
for (const i of state.cachedViews) {
|
||||
if (i === view.name) {
|
||||
const index = state.cachedViews.indexOf(i)
|
||||
state.cachedViews = [].concat(state.cachedViews.slice(index, i + 1))
|
||||
state.cachedViews = state.cachedViews.slice(index, i + 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
@ -60,9 +60,9 @@ const tagsView = {
|
|||
resolve([...state.visitedViews])
|
||||
})
|
||||
},
|
||||
delOtherViews({ commit, state }, view) {
|
||||
delOthersViews({ commit, state }, view) {
|
||||
return new Promise((resolve) => {
|
||||
commit('DEL_OTHER_VIEWS', view)
|
||||
commit('DEL_OTHERS_VIEWS', view)
|
||||
resolve([...state.visitedViews])
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,199 +1,201 @@
|
|||
<template>
|
||||
<div class="tag-container">
|
||||
<scroll-pane class='tags-view-container' ref='scrollPane'>
|
||||
<router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path":key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
|
||||
<div class="tags-view-container">
|
||||
<scroll-pane class='tags-view-wrapper' ref='scrollPane'>
|
||||
<router-link ref='tag' class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" @contextmenu.prevent.native="openMenu(tag,$event)">
|
||||
{{generateTitle(tag.title)}}
|
||||
<span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
|
||||
<span class='el-icon-close' @click.prevent.stop='closeSelectedTag(tag)'></span>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul class='contextmenu' v-show="visible" :style="{left:left+'px',top:top+'px'}">
|
||||
<li @click="closeViewTags(selectedTag, $event)">关闭</li>
|
||||
<li @click="closeOtherTags">关闭其他</li>
|
||||
<li @click="closeAllTags">关闭所有</li>
|
||||
<li @click="closeSelectedTag(selectedTag)">Close</li>
|
||||
<li @click="closeOthersTags">Close Others</li>
|
||||
<li @click="closeAllTags">Close All</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScrollPane from '@/components/ScrollPane'
|
||||
import { generateTitle } from '@/utils/i18n'
|
||||
import ScrollPane from '@/components/ScrollPane'
|
||||
import { generateTitle } from '@/utils/i18n'
|
||||
|
||||
export default {
|
||||
components: { ScrollPane },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
top: 0,
|
||||
left: 0,
|
||||
selectedTag: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visitedViews() {
|
||||
return this.$store.state.tagsView.visitedViews
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
export default {
|
||||
components: { ScrollPane },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
top: 0,
|
||||
left: 0,
|
||||
selectedTag: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visitedViews() {
|
||||
return this.$store.state.tagsView.visitedViews
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.addViewTags()
|
||||
this.moveToCurrentTag()
|
||||
},
|
||||
methods: {
|
||||
generateTitle,
|
||||
closeViewTags(view, $event) {
|
||||
this.$store.dispatch('delVisitedViews', view).then((views) => {
|
||||
if (this.isActive(view)) {
|
||||
const latestView = views.slice(-1)[0]
|
||||
if (latestView) {
|
||||
this.$router.push(latestView.path)
|
||||
} else {
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
})
|
||||
$event.preventDefault()
|
||||
},
|
||||
closeOtherTags() {
|
||||
this.$router.push(this.selectedTag.path)
|
||||
this.$store.dispatch('delOtherViews', this.selectedTag)
|
||||
},
|
||||
closeAllTags() {
|
||||
this.$store.dispatch('delAllViews')
|
||||
this.$router.push('/')
|
||||
},
|
||||
generateRoute() {
|
||||
if (this.$route.name) {
|
||||
return this.$route
|
||||
}
|
||||
return false
|
||||
},
|
||||
addViewTags() {
|
||||
const route = this.generateRoute()
|
||||
if (!route) {
|
||||
return false
|
||||
}
|
||||
this.$store.dispatch('addVisitedViews', route)
|
||||
},
|
||||
isActive(route) {
|
||||
return route.path === this.$route.path || route.name === this.$route.name
|
||||
},
|
||||
moveToCurrentTag() {
|
||||
const tags = this.$refs.tag
|
||||
this.$nextTick(() => {
|
||||
for (const tag of tags) {
|
||||
if (tag.to === this.$route.path) {
|
||||
this.$refs.scrollPane.moveToTarget(tag.$el)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
openMenu(tag, e) {
|
||||
this.visible = true
|
||||
this.selectedTag = tag
|
||||
this.left = e.clientX
|
||||
this.top = e.clientY
|
||||
},
|
||||
closeMenu() {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.addViewTags()
|
||||
this.moveToCurrentTag()
|
||||
},
|
||||
visible(v) {
|
||||
if (v) {
|
||||
window.addEventListener('click', this.closeMenu, false)
|
||||
} else {
|
||||
window.removeEventListener('click', this.closeMenu, false)
|
||||
}
|
||||
visible(value) {
|
||||
if (value) {
|
||||
window.addEventListener('click', this.closeMenu)
|
||||
} else {
|
||||
window.removeEventListener('click', this.closeMenu)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.addViewTags()
|
||||
},
|
||||
methods: {
|
||||
generateTitle, // generateTitle by vue-i18n
|
||||
generateRoute() {
|
||||
if (this.$route.name) {
|
||||
return this.$route
|
||||
}
|
||||
return false
|
||||
},
|
||||
isActive(route) {
|
||||
return route.path === this.$route.path || route.name === this.$route.name
|
||||
},
|
||||
addViewTags() {
|
||||
const route = this.generateRoute()
|
||||
if (!route) {
|
||||
return false
|
||||
}
|
||||
this.$store.dispatch('addVisitedViews', route)
|
||||
},
|
||||
moveToCurrentTag() {
|
||||
const tags = this.$refs.tag
|
||||
this.$nextTick(() => {
|
||||
for (const tag of tags) {
|
||||
if (tag.to === this.$route.path) {
|
||||
this.$refs.scrollPane.moveToTarget(tag.$el)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
closeSelectedTag(view) {
|
||||
this.$store.dispatch('delVisitedViews', view).then((views) => {
|
||||
if (this.isActive(view)) {
|
||||
const latestView = views.slice(-1)[0]
|
||||
if (latestView) {
|
||||
this.$router.push(latestView.path)
|
||||
} else {
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
closeOthersTags() {
|
||||
this.$router.push(this.selectedTag.path)
|
||||
this.$store.dispatch('delOthersViews', this.selectedTag)
|
||||
},
|
||||
closeAllTags() {
|
||||
this.$store.dispatch('delAllViews')
|
||||
this.$router.push('/')
|
||||
},
|
||||
openMenu(tag, e) {
|
||||
this.visible = true
|
||||
this.selectedTag = tag
|
||||
this.left = e.clientX
|
||||
this.top = e.clientY
|
||||
},
|
||||
closeMenu() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.tag-container {
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
.tags-view-container {
|
||||
.tags-view-wrapper {
|
||||
background: #fff;
|
||||
height: 34px;
|
||||
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);
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid #d8dce5;
|
||||
color: #495060;
|
||||
background: #fff;
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .5);
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0.2rem 1.5rem 0.3rem 0.8rem;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
cursor: default;
|
||||
}
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.tags-view-container {
|
||||
background: #fff;
|
||||
height: 34px;
|
||||
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);
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid #d8dce5;
|
||||
color: #495060;
|
||||
background: #fff;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&.active {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
border-color: #42b983;
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
}
|
||||
&.active {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
border-color: #42b983;
|
||||
&::before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.tags-view-container {
|
||||
.tags-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;
|
||||
}
|
||||
//reset element css of el-icon-close
|
||||
.tags-view-wrapper {
|
||||
.tags-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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue