时间：2022-08-27 09:39:21 | 栏目：vue | 点击：次
最近产品给我提了个需求 ————想要实现用户右键table的某一行时，显示该行操作栏的功能。觉得这个需求挺有意思的,特此分享给大家。
技术栈: elementUI
要实现右键菜单 我们需要定义一个菜单栏组件 当用户点击table的某一行时，我们处理好显示位置再将菜单栏渲染到table上。先实现这个rightKeyMenu组件:
// right-key-menu.vue
<template>
<div id="right-key-menu" class="right-key-menu">
<div class="rightKeyMenuItem" @click="$emit('edit')">编辑</div>
<div class="rightKeyMenuItem" @click="$emit('del')">删除</div>
</div>
</template>
<script>
//...忽略
methods: {
onload (row, column,event) {
//调整菜单出现的位置
let menu = document.querySelector('#right-key-menu')
let betweenHeight = document.body.clientHeight - event.clientY
if (betweenHeight < 150) {
menu.style.top = event.clientY -80 + 'px'
} else {
menu.style.top = event.clientY -30 + 'px'
}
menu.style.left = event.clientX + 20 + 'px'
// 监听dom的click事件
document.addEventListener('click', this.$emit('rightClick'))
}
}
</script>
<style>
.right-key-menu {
display: block;
line-height: 34px;
text-align: center;
}
.right-key-menu:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.right-key-menu {
position: absolute;
background-color: #fff;
width: 100px;
font-size: 12px;
color: #444040;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
white-space: nowrap;
z-index: 1000;
}
.rightKeyMenuItem:hover {
cursor: pointer;
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
</style>
使用rightKeyClick组件。我们需要监听用户右键点击table行的操作， 这个功能在elementUI table中已经有相应的方法了：
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 (row, column, event)
触发这个方法然后将参数都传递过去。修改visable的值将菜单栏组件显现出来。
在菜单栏组件中我们通过获取到当前点击时浏览器Y轴位置将menu的高度进行合适修改。这样当我们点击不同table行。menu的位置也会随着鼠标点击时距离浏览器Y轴的位置相应的进行变化。
// business-table
<template>
<div>
<el-table
:data="tableData"
@row-contextmenu="rowContextmenu"
border>
//...忽略
</el-table>
<rightKeyMenu v-if="visable"
@rightClick="rightClick"
ref="menu"
@edit="handleEdit"
@del="handleDel">
</rightKeyMenu>
</div>
</template>
import rightKeyMenu from '@component/right-key-menu/index'
export default {
components: {
rightKeyMenu
},
methods: {
rowContextmenu (row, column, event) {
//如果之前已经打开了先关闭一下。
this.visable = false
setTimeout(()=>{
this.visable = true
},300)
// 阻止右键默认行为
event.preventDefault()
this.$nextTick(() => {
this.$refs.menu.onload(row,column,event)
})
},
rightClick() {
this.visable = false
// 取消鼠标监听事件 菜单栏
document.removeEventListener('click', this.rightClick)
},
handleEdit () {
// ..do something
},
handleDel () {
// ..do something
}
}
}
有时候列表的操作项并不仅仅局限于修改和删除。 因此我们可以使用插槽自定义需要显示的内容。
<template>
<div id="right-key-menu" class="right-key-menu">
<div class="rightKeyMenuItem" @click="$emit('edit')">编辑</div>
<div class="rightKeyMenuItem" @click="$emit('del')">删除</div>
<div class="rightKeyMenuItem"><slot name="more"></slot></div>
</div>
</template>
至此。element右键菜单的功能就实现完成了。实现这个需求最主要的一点是要计算好右键菜单显示的位置。由于不同页面table所在位置不同，因此rightKeyClick组件还需要传递几个参数去进行优化适配。这里我就不在细说了。大家可以自己去试试。