panqihua
/
ttsbg-java-api
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

当tags-view滚动关闭右键菜单

Browse Source
master
RuoYi 5 years ago
parent 1e2058bdfb
commit bb5520a7d1
3 changed files with 281 additions and 287 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      ruoyi-ui/src/assets/styles/element-ui.scss
  2. 9
      ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
  3. 165
      ruoyi-ui/src/layout/components/TagsView/index.vue

2
ruoyi-ui/src/assets/styles/element-ui.scss
Unescape View File

@ -31,7 +31,7 @@
.fixed-width { .fixed-width {
.el-button--mini { .el-button--mini {
padding: 7px 10px; padding: 7px 10px;
width: 60px; min-width: 60px;
} }
} }

9
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue
Unescape View File

@ -19,12 +19,21 @@ export default {
return this.$refs.scrollContainer.$refs.wrap return this.$refs.scrollContainer.$refs.wrap
} }
}, },
mounted() {
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
},
beforeDestroy() {
this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
},
methods: { methods: {
handleScroll(e) { handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40 const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = this.scrollWrapper const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
}, },
emitScroll() {
this.$emit('scroll')
},
moveToTarget(currentTag) { moveToTarget(currentTag) {
const $container = this.$refs.scrollContainer.$el const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth const $containerWidth = $container.offsetWidth

165
ruoyi-ui/src/layout/components/TagsView/index.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div id="tags-view-container" class="tags-view-container"> <div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper"> <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link <router-link
v-for="tag in visitedViews" v-for="tag in visitedViews"
ref="tag" ref="tag"
@ -14,11 +14,7 @@
@contextmenu.prevent.native="openMenu(tag,$event)" @contextmenu.prevent.native="openMenu(tag,$event)"
> >
{{ tag.title }} {{ tag.title }}
<span <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
v-if="!isAffix(tag)"
class="el-icon-close"
@click.prevent.stop="closeSelectedTag(tag)"
/>
</router-link> </router-link>
</scroll-pane> </scroll-pane>
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
@ -31,8 +27,8 @@
</template> </template>
<script> <script>
import ScrollPane from "./ScrollPane"; import ScrollPane from './ScrollPane'
import path from "path"; import path from 'path'
export default { export default {
components: { ScrollPane }, components: { ScrollPane },
@ -43,14 +39,14 @@ export default {
left: 0, left: 0,
selectedTag: {}, selectedTag: {},
affixTags: [] affixTags: []
}; }
}, },
computed: { computed: {
visitedViews() { visitedViews() {
return this.$store.state.tagsView.visitedViews; return this.$store.state.tagsView.visitedViews
}, },
routes() { routes() {
return this.$store.state.permission.routes; return this.$store.state.permission.routes
}, },
theme() { theme() {
return this.$store.state.settings.theme; return this.$store.state.settings.theme;
@ -58,24 +54,24 @@ export default {
}, },
watch: { watch: {
$route() { $route() {
this.addTags(); this.addTags()
this.moveToCurrentTag(); this.moveToCurrentTag()
}, },
visible(value) { visible(value) {
if (value) { if (value) {
document.body.addEventListener("click", this.closeMenu); document.body.addEventListener('click', this.closeMenu)
} else { } else {
document.body.removeEventListener("click", this.closeMenu); document.body.removeEventListener('click', this.closeMenu)
} }
} }
}, },
mounted() { mounted() {
this.initTags(); this.initTags()
this.addTags(); this.addTags()
}, },
methods: { methods: {
isActive(route) { isActive(route) {
return route.path === this.$route.path; return route.path === this.$route.path
}, },
activeStyle(tag) { activeStyle(tag) {
if (!this.isActive(tag)) return {}; if (!this.isActive(tag)) return {};
@ -85,142 +81,131 @@ export default {
}; };
}, },
isAffix(tag) { isAffix(tag) {
return tag.meta && tag.meta.affix; return tag.meta && tag.meta.affix
}, },
filterAffixTags(routes, basePath = "/") { filterAffixTags(routes, basePath = '/') {
let tags = []; let tags = []
routes.forEach(route => { routes.forEach(route => {
if (route.meta && route.meta.affix) { if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path); const tagPath = path.resolve(basePath, route.path)
tags.push({ tags.push({
fullPath: tagPath, fullPath: tagPath,
path: tagPath, path: tagPath,
name: route.name, name: route.name,
meta: { ...route.meta } meta: { ...route.meta }
}); })
} }
if (route.children) { if (route.children) {
const tempTags = this.filterAffixTags( const tempTags = this.filterAffixTags(route.children, route.path)
route.children,
route.path
);
if (tempTags.length >= 1) { if (tempTags.length >= 1) {
tags = [...tags, ...tempTags]; tags = [...tags, ...tempTags]
} }
} }
}); })
return tags; return tags
}, },
initTags() { initTags() {
const affixTags = (this.affixTags = this.filterAffixTags( const affixTags = this.affixTags = this.filterAffixTags(this.routes)
this.routes
));
for (const tag of affixTags) { for (const tag of affixTags) {
// Must have tag name // Must have tag name
if (tag.name) { if (tag.name) {
this.$store.dispatch("tagsView/addVisitedView", tag); this.$store.dispatch('tagsView/addVisitedView', tag)
} }
} }
}, },
addTags() { addTags() {
const { name } = this.$route; const { name } = this.$route
if (name) { if (name) {
this.$store.dispatch("tagsView/addView", this.$route); this.$store.dispatch('tagsView/addView', this.$route)
} }
return false; return false
}, },
moveToCurrentTag() { moveToCurrentTag() {
const tags = this.$refs.tag; const tags = this.$refs.tag
this.$nextTick(() => { this.$nextTick(() => {
for (const tag of tags) { for (const tag of tags) {
if (tag.to.path === this.$route.path) { if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag); this.$refs.scrollPane.moveToTarget(tag)
// when query is different then update // when query is different then update
if (tag.to.fullPath !== this.$route.fullPath) { if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.dispatch( this.$store.dispatch('tagsView/updateVisitedView', this.$route)
"tagsView/updateVisitedView",
this.$route
);
} }
break; break
} }
} }
}); })
}, },
refreshSelectedTag(view) { refreshSelectedTag(view) {
this.$store.dispatch("tagsView/delCachedView", view).then(() => { this.$store.dispatch('tagsView/delCachedView', view).then(() => {
const { fullPath } = view; const { fullPath } = view
this.$nextTick(() => { this.$nextTick(() => {
this.$router.replace({ this.$router.replace({
path: "/redirect" + fullPath path: '/redirect' + fullPath
}); })
}); })
}); })
}, },
closeSelectedTag(view) { closeSelectedTag(view) {
this.$store this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
.dispatch("tagsView/delView", view)
.then(({ visitedViews }) => {
if (this.isActive(view)) { if (this.isActive(view)) {
this.toLastView(visitedViews, view); this.toLastView(visitedViews, view)
} }
}); })
}, },
closeOthersTags() { closeOthersTags() {
this.$router.push(this.selectedTag); this.$router.push(this.selectedTag)
this.$store this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
.dispatch("tagsView/delOthersViews", this.selectedTag) this.moveToCurrentTag()
.then(() => { })
this.moveToCurrentTag();
});
}, },
closeAllTags(view) { closeAllTags(view) {
this.$store this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
.dispatch("tagsView/delAllViews")
.then(({ visitedViews }) => {
if (this.affixTags.some(tag => tag.path === view.path)) { if (this.affixTags.some(tag => tag.path === view.path)) {
return; return
} }
this.toLastView(visitedViews, view); this.toLastView(visitedViews, view)
}); })
}, },
toLastView(visitedViews, view) { toLastView(visitedViews, view) {
const latestView = visitedViews.slice(-1)[0]; const latestView = visitedViews.slice(-1)[0]
if (latestView) { if (latestView) {
this.$router.push(latestView.fullPath); this.$router.push(latestView.fullPath)
} else { } else {
// now the default is to redirect to the home page if there is no tags-view, // now the default is to redirect to the home page if there is no tags-view,
// you can adjust it according to your needs. // you can adjust it according to your needs.
if (view.name === "Dashboard") { if (view.name === 'Dashboard') {
// to reload home page // to reload home page
this.$router.replace({ path: "/redirect" + view.fullPath }); this.$router.replace({ path: '/redirect' + view.fullPath })
} else { } else {
this.$router.push("/"); this.$router.push('/')
} }
} }
}, },
openMenu(tag, e) { openMenu(tag, e) {
const menuMinWidth = 105; const menuMinWidth = 105
const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
const offsetWidth = this.$el.offsetWidth; // container width const offsetWidth = this.$el.offsetWidth // container width
const maxLeft = offsetWidth - menuMinWidth; // left boundary const maxLeft = offsetWidth - menuMinWidth // left boundary
const left = e.clientX - offsetLeft + 15; // 15: margin right const left = e.clientX - offsetLeft + 15 // 15: margin right
if (left > maxLeft) { if (left > maxLeft) {
this.left = maxLeft; this.left = maxLeft
} else { } else {
this.left = left; this.left = left
} }
this.top = e.clientY; this.top = e.clientY
this.visible = true; this.visible = true
this.selectedTag = tag; this.selectedTag = tag
}, },
closeMenu() { closeMenu() {
this.visible = false; this.visible = false
},
handleScroll() {
this.closeMenu()
} }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -229,7 +214,7 @@ export default {
width: 100%; width: 100%;
background: #fff; background: #fff;
border-bottom: 1px solid #d8dce5; border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-wrapper { .tags-view-wrapper {
.tags-view-item { .tags-view-item {
display: inline-block; display: inline-block;
@ -255,7 +240,7 @@ export default {
color: #fff; color: #fff;
border-color: #42b983; border-color: #42b983;
&::before { &::before {
content: ""; content: '';
background: #fff; background: #fff;
display: inline-block; display: inline-block;
width: 8px; width: 8px;
@ -278,7 +263,7 @@ export default {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #333; color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li { li {
margin: 0; margin: 0;
padding: 7px 16px; padding: 7px 16px;
@ -301,10 +286,10 @@ export default {
vertical-align: 2px; vertical-align: 2px;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%; transform-origin: 100% 50%;
&:before { &:before {
transform: scale(0.6); transform: scale(.6);
display: inline-block; display: inline-block;
vertical-align: -3px; vertical-align: -3px;
} }

Write Preview
Loading…
Cancel
Save