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. 557
      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

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

@ -1,318 +1,303 @@
<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"
:key="tag.path" :key="tag.path"
:class="isActive(tag)?'active':''" :class="isActive(tag)?'active':''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span" tag="span"
class="tags-view-item" class="tags-view-item"
:style="activeStyle(tag)" :style="activeStyle(tag)"
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''" @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
@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)" </router-link>
class="el-icon-close" </scroll-pane>
@click.prevent.stop="closeSelectedTag(tag)" <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
/> <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
</router-link> <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
</scroll-pane> <li @click="closeOthersTags">关闭其他</li>
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> <li @click="closeAllTags(selectedTag)">关闭所有</li>
<li @click="refreshSelectedTag(selectedTag)">刷新页面</li> </ul>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li> </div>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags(selectedTag)">关闭所有</li>
</ul>
</div>
</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 },
data() { data() {
return { return {
visible: false, visible: false,
top: 0, top: 0,
left: 0, left: 0,
selectedTag: {}, selectedTag: {},
affixTags: [] affixTags: []
}; }
},
computed: {
visitedViews() {
return this.$store.state.tagsView.visitedViews
},
routes() {
return this.$store.state.permission.routes
},
theme() {
return this.$store.state.settings.theme;
}
},
watch: {
$route() {
this.addTags()
this.moveToCurrentTag()
},
visible(value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
}
},
mounted() {
this.initTags()
this.addTags()
},
methods: {
isActive(route) {
return route.path === this.$route.path
},
activeStyle(tag) {
if (!this.isActive(tag)) return {};
return {
"background-color": this.theme,
"border-color": this.theme
};
},
isAffix(tag) {
return tag.meta && tag.meta.affix
}, },
computed: { filterAffixTags(routes, basePath = '/') {
visitedViews() { let tags = []
return this.$store.state.tagsView.visitedViews; routes.forEach(route => {
}, if (route.meta && route.meta.affix) {
routes() { const tagPath = path.resolve(basePath, route.path)
return this.$store.state.permission.routes; tags.push({
}, fullPath: tagPath,
theme() { path: tagPath,
return this.$store.state.settings.theme; name: route.name,
meta: { ...route.meta }
})
} }
if (route.children) {
const tempTags = this.filterAffixTags(route.children, route.path)
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags]
}
}
})
return tags
}, },
watch: { initTags() {
$route() { const affixTags = this.affixTags = this.filterAffixTags(this.routes)
this.addTags(); for (const tag of affixTags) {
this.moveToCurrentTag(); // Must have tag name
}, if (tag.name) {
visible(value) { this.$store.dispatch('tagsView/addVisitedView', tag)
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
} }
}
}, },
mounted() { addTags() {
this.initTags(); const { name } = this.$route
this.addTags(); if (name) {
this.$store.dispatch('tagsView/addView', this.$route)
}
return false
}, },
methods: { moveToCurrentTag() {
isActive(route) { const tags = this.$refs.tag
return route.path === this.$route.path; this.$nextTick(() => {
}, for (const tag of tags) {
activeStyle(tag) { if (tag.to.path === this.$route.path) {
if (!this.isActive(tag)) return {}; this.$refs.scrollPane.moveToTarget(tag)
return { // when query is different then update
"background-color": this.theme, if (tag.to.fullPath !== this.$route.fullPath) {
"border-color": this.theme this.$store.dispatch('tagsView/updateVisitedView', this.$route)
};
},
isAffix(tag) {
return tag.meta && tag.meta.affix;
},
filterAffixTags(routes, basePath = "/") {
let tags = [];
routes.forEach(route => {
if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path);
tags.push({
fullPath: tagPath,
path: tagPath,
name: route.name,
meta: { ...route.meta }
});
}
if (route.children) {
const tempTags = this.filterAffixTags(
route.children,
route.path
);
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags];
}
}
});
return tags;
},
initTags() {
const affixTags = (this.affixTags = this.filterAffixTags(
this.routes
));
for (const tag of affixTags) {
// Must have tag name
if (tag.name) {
this.$store.dispatch("tagsView/addVisitedView", tag);
}
} }
}, break
addTags() { }
const { name } = this.$route; }
if (name) { })
this.$store.dispatch("tagsView/addView", this.$route); },
} refreshSelectedTag(view) {
return false; this.$store.dispatch('tagsView/delCachedView', view).then(() => {
}, const { fullPath } = view
moveToCurrentTag() { this.$nextTick(() => {
const tags = this.$refs.tag; this.$router.replace({
this.$nextTick(() => { path: '/redirect' + fullPath
for (const tag of tags) { })
if (tag.to.path === this.$route.path) { })
this.$refs.scrollPane.moveToTarget(tag); })
// when query is different then update },
if (tag.to.fullPath !== this.$route.fullPath) { closeSelectedTag(view) {
this.$store.dispatch( this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
"tagsView/updateVisitedView", if (this.isActive(view)) {
this.$route this.toLastView(visitedViews, view)
); }
} })
break; },
} closeOthersTags() {
} this.$router.push(this.selectedTag)
}); this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
}, this.moveToCurrentTag()
refreshSelectedTag(view) { })
this.$store.dispatch("tagsView/delCachedView", view).then(() => { },
const { fullPath } = view; closeAllTags(view) {
this.$nextTick(() => { this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
this.$router.replace({ if (this.affixTags.some(tag => tag.path === view.path)) {
path: "/redirect" + fullPath return
}); }
}); this.toLastView(visitedViews, view)
}); })
}, },
closeSelectedTag(view) { toLastView(visitedViews, view) {
this.$store const latestView = visitedViews.slice(-1)[0]
.dispatch("tagsView/delView", view) if (latestView) {
.then(({ visitedViews }) => { this.$router.push(latestView.fullPath)
if (this.isActive(view)) { } else {
this.toLastView(visitedViews, 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.
}); if (view.name === 'Dashboard') {
}, // to reload home page
closeOthersTags() { this.$router.replace({ path: '/redirect' + view.fullPath })
this.$router.push(this.selectedTag); } else {
this.$store this.$router.push('/')
.dispatch("tagsView/delOthersViews", this.selectedTag) }
.then(() => { }
this.moveToCurrentTag(); },
}); openMenu(tag, e) {
}, const menuMinWidth = 105
closeAllTags(view) { const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
this.$store const offsetWidth = this.$el.offsetWidth // container width
.dispatch("tagsView/delAllViews") const maxLeft = offsetWidth - menuMinWidth // left boundary
.then(({ visitedViews }) => { const left = e.clientX - offsetLeft + 15 // 15: margin right
if (this.affixTags.some(tag => tag.path === view.path)) {
return;
}
this.toLastView(visitedViews, view);
});
},
toLastView(visitedViews, view) {
const latestView = visitedViews.slice(-1)[0];
if (latestView) {
this.$router.push(latestView.fullPath);
} else {
// now the default is to redirect to the home page if there is no tags-view,
// you can adjust it according to your needs.
if (view.name === "Dashboard") {
// to reload home page
this.$router.replace({ path: "/redirect" + view.fullPath });
} else {
this.$router.push("/");
}
}
},
openMenu(tag, e) {
const menuMinWidth = 105;
const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
const offsetWidth = this.$el.offsetWidth; // container width
const maxLeft = offsetWidth - menuMinWidth; // left boundary
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>
.tags-view-container { .tags-view-container {
height: 34px; height: 34px;
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;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
border: 1px solid #d8dce5; border: 1px solid #d8dce5;
color: #495060; color: #495060;
background: #fff; background: #fff;
padding: 0 8px; padding: 0 8px;
font-size: 12px; font-size: 12px;
margin-left: 5px; margin-left: 5px;
margin-top: 4px; margin-top: 4px;
&:first-of-type { &:first-of-type {
margin-left: 15px; margin-left: 15px;
} }
&:last-of-type { &:last-of-type {
margin-right: 15px; margin-right: 15px;
} }
&.active { &.active {
background-color: #42b983; background-color: #42b983;
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;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
margin-right: 2px; margin-right: 2px;
}
}
} }
}
} }
.contextmenu { }
margin: 0; .contextmenu {
background: #fff; margin: 0;
z-index: 3000; background: #fff;
position: absolute; z-index: 3000;
list-style-type: none; position: absolute;
padding: 5px 0; list-style-type: none;
border-radius: 4px; padding: 5px 0;
font-size: 12px; border-radius: 4px;
font-weight: 400; font-size: 12px;
color: #333; font-weight: 400;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); color: #333;
li { box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
margin: 0; li {
padding: 7px 16px; margin: 0;
cursor: pointer; padding: 7px 16px;
&:hover { cursor: pointer;
background: #eee; &:hover {
} background: #eee;
} }
} }
}
} }
</style> </style>
<style lang="scss"> <style lang="scss">
//reset element css of el-icon-close //reset element css of el-icon-close
.tags-view-wrapper { .tags-view-wrapper {
.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 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;
} }
&:hover { &:hover {
background-color: #b4bccc; background-color: #b4bccc;
color: #fff; color: #fff;
} }
}
} }
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save