Skip to content

V
VueElementTemplate
Commit b6d97f18 authored by leij1ang's avatar leij1ang Committed by 花裤衩
Browse files
Options

feat[tags-view]: tags-view add contextmenu (#343) 

* add the menu by right-clicking the tags

* bug fixed

* refine
parent a68413cb
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 109 deletions
src/store/modules/tagsView.js
View file @ b6d97f18
...@@ -29,6 +29,25 @@ const tagsView = { ...@@ -29,6 +29,25 @@ const tagsView = {
break break
} }
} }
},
DEL_OTHER_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))
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))
break
}
}
},
DEL_ALL_VIEWS: (state) => {
state.visitedViews = []
state.cachedViews = []
} }
}, },
actions: { actions: {
...@@ -40,6 +59,18 @@ const tagsView = { ...@@ -40,6 +59,18 @@ const tagsView = {
commit('DEL_VISITED_VIEWS', view) commit('DEL_VISITED_VIEWS', view)
resolve([...state.visitedViews]) resolve([...state.visitedViews])
}) })
},
delOtherViews({ commit, state }, view) {
return new Promise((resolve) => {
commit('DEL_OTHER_VIEWS', view)
resolve([...state.visitedViews])
})
},
delAllViews({ commit, state }) {
return new Promise((resolve) => {
commit('DEL_ALL_VIEWS')
resolve([...state.visitedViews])
})
} }
} }
} }
......
src/views/layout/components/TagsView.vue
View file @ b6d97f18
<template> <template>
<scroll-pane class='tags-view-container' ref='scrollPane'> <div class="tag-container">
<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"> <scroll-pane class='tags-view-container' ref='scrollPane'>
{{generateTitle(tag.title)}} <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)">
<span class='el-icon-close' @click='closeViewTags(tag,$event)'></span> {{generateTitle(tag.title)}}
</router-link> <span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
</scroll-pane> </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>
</ul>
</div>
</template> </template>
<script> <script>
import ScrollPane from '@/components/ScrollPane' import ScrollPane from '@/components/ScrollPane'
import { generateTitle } from '@/utils/i18n' import { generateTitle } from '@/utils/i18n'
export default { export default {
components: { ScrollPane }, components: { ScrollPane },
computed: { data() {
visitedViews() { return {
return this.$store.state.tagsView.visitedViews visible: false,
} top: 0,
}, left: 0,
mounted() { selectedTag: {}
this.addViewTags()
},
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()
},
generateRoute() {
if (this.$route.name) {
return this.$route
} }
return false
}, },
addViewTags() { computed: {
const route = this.generateRoute() visitedViews() {
if (!route) { return this.$store.state.tagsView.visitedViews
return false
} }
this.$store.dispatch('addVisitedViews', route)
}, },
isActive(route) { mounted() {
return route.path === this.$route.path || route.name === this.$route.name this.addViewTags()
}, },
moveToCurrentTag() { methods: {
const tags = this.$refs.tag generateTitle,
this.$nextTick(() => { closeViewTags(view, $event) {
for (const tag of tags) { this.$store.dispatch('delVisitedViews', view).then((views) => {
if (tag.to === this.$route.path) { if (this.isActive(view)) {
this.$refs.scrollPane.moveToTarget(tag.$el) const latestView = views.slice(-1)[0]
break 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() {
watch: { const route = this.generateRoute()
$route() { if (!route) {
this.addViewTags() return false
this.moveToCurrentTag() }
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)
}
}
} }
} }
}
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.tags-view-container { .tag-container {
background: #fff; .contextmenu {
height: 34px; margin: 0;
border-bottom: 1px solid #d8dce5; background: #fff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); z-index: 99999;
.tags-view-item { position: absolute;
display: inline-block; list-style-type: none;
position: relative; padding-left: 0;
height: 26px; border: 1px solid rgba(0, 0, 0, 0.4);
line-height: 26px; font-size: 0.8rem;
border: 1px solid #d8dce5; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .5);
color: #495060; li {
background: #fff; margin: 0;
padding: 0 8px; padding: 0.2rem 1.5rem 0.3rem 0.8rem;
font-size: 12px; &:hover {
margin-left: 5px; background: #eee;
margin-top: 4px; cursor: default;
&:first-of-type { }
margin-left: 15px; }
} }
&.active { .tags-view-container {
background-color: #42b983; background: #fff;
color: #fff; height: 34px;
border-color: #42b983; border-bottom: 1px solid #d8dce5;
&::before { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
content: ''; .tags-view-item {
background: #fff;
display: inline-block; display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative; position: relative;
margin-right: 2px; 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;
}
}
} }
} }
} }
}
</style> </style>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.tags-view-container { .tags-view-container {
.tags-view-item { .tags-view-item {
.el-icon-close { .el-icon-close {
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: 2px; vertical-align: 2px;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1); transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%; transform-origin: 100% 50%;
&:before { &:before {
transform: scale(.6); transform: scale(.6);
display: inline-block; display: inline-block;
vertical-align: -3px; vertical-align: -3px;
} }
&:hover { &:hover {
background-color: #b4bccc; background-color: #b4bccc;
color: #fff; color: #fff;
}
} }
} }
} }
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment