caoliancun
/
vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 重构TabView和ContextMenu的部分逻辑

Browse Source 
1. 提取并修改getPageKey函数，表意更明确
2. 修复ContextMenu点击失败的bug（菜单项之间有margin缝隙）
3. 其他个别代码格式（基于eslint）调整
master
秦旭洋 4 years ago
parent 255f68709e
commit 0f7f73fd1a
2 changed files with 64 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/components/menu/Contextmenu.vue
  2. 89
      src/layouts/TabsView.vue

35
src/components/menu/Contextmenu.vue
Unescape View File

@ -1,7 +1,14 @@
<template>
<a-menu :style="style" class="contextmenu" v-show="visible" @click="handleClick" :selectedKeys="selectedKeys">
<a-menu
v-show="visible"
class="contextmenu"
:style="style"
:selectedKeys="selectedKeys"
@click="handleClick"
>
<a-menu-item :key="item.key" v-for="item in itemList">
<a-icon role="menuitemicon" v-if="item.icon" :type="item.icon" />{{item.text}}
<a-icon v-if="item.icon" :type="item.icon" />
<span>{{ item.text }}</span>
</a-menu-item>
</a-menu>
</template>
@ -38,23 +45,27 @@ export default {
}
},
created () {
window.addEventListener('mousedown', e => this.closeMenu(e))
window.addEventListener('contextmenu', e => this.setPosition(e))
const clickHandler = () => this.closeMenu()
const contextMenuHandler = e => this.setPosition(e)
window.addEventListener('click', clickHandler)
window.addEventListener('contextmenu', contextMenuHandler)
this.$emit('hook:beforeDestroy', () => {
window.removeEventListener('click', clickHandler)
window.removeEventListener('contextmenu', contextMenuHandler)
})
},
methods: {
closeMenu (e) {
if (['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
closeMenu () {
this.$emit('update:visible', false)
}
},
setPosition (e) {
this.left = e.clientX
this.top = e.clientY
this.target = e.target
},
handleClick ({key}) {
handleClick ({ key }) {
this.$emit('select', key, this.target)
this.$emit('update:visible', false)
this.closeMenu()
}
}
}
@ -63,9 +74,11 @@ export default {
<style lang="less" scoped>
.contextmenu{
position: fixed;
z-index: 1;
z-index: 1000;
border-radius: 4px;
box-shadow: -4px 4px 16px 1px @shadow-color !important;
}
.ant-menu-item {
margin: 0 !important // 菜单项之间的缝隙会影响点击
}
</style>

89
src/layouts/TabsView.vue
Unescape View File

@ -2,14 +2,15 @@
<admin-layout>
<contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
<a-tabs
@contextmenu.native="e => onContextmenu(e)"
v-if="multiPage"
type="editable-card"
:active-key="activePage"
:style="`margin: -16px auto 8px; ${layout == 'head' ? 'max-width: 1400px;' : ''}`"
:hide-add="true"
type="editable-card"
@change="changePage"
@edit="editPage">
@edit="editPage"
@contextmenu="onContextmenu"
>
<a-tab-pane :key="page.fullPath" v-for="page in pageList">
<span slot="tab" :pagekey="page.fullPath">{{page.name}}</span>
</a-tab-pane>
@ -33,7 +34,7 @@ import {mapState, mapMutations} from 'vuex'
export default {
name: 'TabsView',
components: {PageToggleTransition, Contextmenu, AdminLayout},
components: { PageToggleTransition, Contextmenu, AdminLayout },
data () {
return {
pageList: [],
@ -76,68 +77,43 @@ export default {
this.$router.push(key)
},
editPage (key, action) {
this[action](key)
this[action](key) // remove
},
remove (key) {
if (this.pageList.length === 1) {
this.$message.warning('这是最后一页，不能再关闭了啦')
return
return this.$message.warning('这是最后一页，不能再关闭了啦')
}
let index = this.pageList.findIndex(item => item.fullPath == key)
let index = this.pageList.findIndex(item => item.fullPath === key)
let pageRoute = this.pageList[index]
this.clearCache(pageRoute)
this.pageList = this.pageList.filter(item => item.fullPath !== key)
if (key == this.activePage) {
if (key === this.activePage) {
index = index >= this.pageList.length ? this.pageList.length - 1 : index
this.activePage = this.pageList[index].fullPath
this.$router.push(this.activePage)
}
},
onContextmenu (e) {
const pageKey = this.getPageKey(e.target)
if (pageKey !== null) {
const pageKey = getPageKey(e.target)
if (pageKey) {
e.preventDefault()
this.menuVisible = true
}
},
/**
* 由于ant-design-vue组件库的TabPane组件暂不支持自定义监听器，无法直接获取到右键target所在标签页的 pagekey 。故增加此方法用于
* 查询右键target所在标签页的标识 pagekey ，以用于自定义右键菜单的事件处理。
* 注：TabPane组件支持自定义监听器后可去除该方法并重构 ‘自定义右键菜单的事件处理’
* @param target 查询开始目标
* @param count 查询层级深度 （查找层级最多不超过3层，超过3层深度直接返回 null）
* @returns {String}
*/
getPageKey (target, depth) {
depth = depth || 0
if (depth > 2) {
return null
}
let pageKey = target.getAttribute('pagekey')
pageKey = pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
},
onMenuSelect (key, target) {
let pageKey = this.getPageKey(target)
let pageKey = getPageKey(target)
switch (key) {
case '1':
this.closeLeft(pageKey)
break
case '2':
this.closeRight(pageKey)
break
case '3':
this.closeOthers(pageKey)
break
default:
break
case '1': this.closeLeft(pageKey); break
case '2': this.closeRight(pageKey); break
case '3': this.closeOthers(pageKey); break
default: break
}
},
closeOthers (pageKey) {
const index = this.pageList.findIndex(item => item.fullPath == pageKey)
const index = this.pageList.findIndex(item => item.fullPath === pageKey)
// 要关闭的页面清除缓存
this.pageList.forEach(item => {
if (item.fullPath != pageKey){
if (item.fullPath !== pageKey){
this.clearCache(item)
}
})
@ -146,7 +122,7 @@ export default {
this.$router.push(this.activePage)
},
closeLeft (pageKey) {
const index = this.pageList.findIndex(item => item.fullPath == pageKey)
const index = this.pageList.findIndex(item => item.fullPath === pageKey)
// 清除缓存
this.pageList.forEach((item, i) => {
if (i < index) {
@ -154,13 +130,13 @@ export default {
}
})
this.pageList = this.pageList.slice(index)
if (this.pageList.findIndex(item => item.fullPath == this.activePage) == -1) {
if (this.pageList.findIndex(item => item.fullPath === this.activePage) === -1) {
this.activePage = this.pageList[0].fullPath
this.$router.push(this.activePage)
}
},
closeRight (pageKey) {
const index = this.pageList.findIndex(item => item.fullPath == pageKey)
const index = this.pageList.findIndex(item => item.fullPath === pageKey)
// 清除缓存
this.pageList.forEach((item, i) => {
if (i > index) {
@ -168,27 +144,40 @@ export default {
}
})
this.pageList = this.pageList.slice(0, index + 1)
if (this.pageList.findIndex(item => item.fullPath == this.activePage) == -1) {
if (this.pageList.findIndex(item => item.fullPath === this.activePage) === -1) {
this.activePage = this.pageList[this.pageList.length - 1].fullPath
this.$router.push(this.activePage)
}
},
clearCache(route) {
const componentName = route.matched.slice(-1)[0].components.default.name
if (this.dustbins.findIndex(item => item == componentName) == -1) {
if (this.dustbins.findIndex(item => item === componentName) === -1) {
this.setDustbins(this.dustbins.concat(componentName))
}
},
putCache(route) {
const componentName = route.matched.slice(-1)[0].components.default.name
if (this.dustbins.findIndex(item => item == componentName) != -1) {
this.setDustbins(this.dustbins.filter(item => item != componentName))
if (this.dustbins.includes(componentName)) {
this.setDustbins(this.dustbins.filter(item => item !== componentName))
}
},
...mapMutations('setting', ['setDustbins'])
}
}
/**
* 由于ant-design-vue组件库的TabPane组件暂不支持自定义监听器，无法直接获取到右键target所在标签页的 pagekey 。故增加此方法用于
* 查询右键target所在标签页的标识 pagekey ，以用于自定义右键菜单的事件处理。
* 注：TabPane组件支持自定义监听器后可去除该方法并重构 ‘自定义右键菜单的事件处理’
* @param target 查询开始目标
* @param depth 查询层级深度 （查找层级最多不超过3层，超过3层深度直接返回 null）
* @returns {String}
*/
function getPageKey (target, depth = 0) {
if (depth > 2 || !target) {
return null
}
return target.getAttribute('pagekey') || getPageKey(target.firstElementChild, ++depth)
}
</script>
<style scoped lang="less">

Write Preview
Loading…
Cancel
Save