本文章主用作记录本人开发所遇问题,方便查阅,也希望能对他人有轻微帮助。
由于做的项目是单页面web项目,所以用到的模板都差不多,特别是显示数据时el-table用的最多,所以就把这个组件进行了再封装,这样有表格的地方就可以继承该模板实现,大大的减轻了代码量,简洁了页面。由于是再封装的组件,原生的属性和方法都需要先在组件定义好,在通过emit传值到其子页面。
本文提到的主要用到右击事件(row-contextmenu),左键单击事件(row-click)以及鼠标移入移出事件 (cell-mouse-enter/cell-mouse-leave)
el-table地址:Table 表格 | Element Plus
在页面新建以下代码:
div(id="menu" class="menu")
ul(class="menuUl")
li(v-for="(item, index) in menus" :key="index")
|{{ item }}
div(class="dpop" id="dpop")
|鼠标右键弹出操作菜单
注释:id用来绑定元素,class用来设置样式。
在css样式当中设置:(其他样式可根据自身情况设置)
display: none; //隐藏元素
position: absolute;
top: 0;
left: 0;
然后接下来就是在方法中定义:
mouseEnter() {
(document.querySelector('表格的类名') as any).onmouseover = function (e: any) {
const dpop = document.querySelector("#dpop") as any
dpop.style.left = e.clientX - 根据自身需要设置的偏移量 + "px"
dpop.style.top = e.clientY - xxx + "px"
dpop.style.display = "block" //设置元素的样式为显示
}
}
mouseLeave() {
const dpop = document.querySelector("#dpop") as any
dpop.style.display = "none" //设置元素隐藏
}
tableClickHandle() { //左键事件是为了当点击菜单其他地方时关闭菜单
const menu = document.querySelector("#menu") as any
menu.style.display = "none"
}
rightClickHandle(row: any) {
(document.querySelector('表格的类名') as any).oncontextmenu = function (e: any) {
//阻止浏览器显示表格行的原右键事件
e.preventDefault()
const menu = document.querySelector("#menu") as any
// 根据事件对象中鼠标点击的位置,进行定位
menu.style.left = e.clientX - xxx + "px"
menu.style.top = e.clientY - xxx + "px"
// 改变自定义菜单的隐藏与显示
menu.style.display = "block"
}
}
注释: "表格的类名":此处设置的是根据自身需要用到的表格范围来定义。另外因为是web应用,在右键时我们还需要把浏览器原本的右击事件阻止。所以用到preventDefault()方法。
以上就可以实现一个简单的右键菜单和悬浮提示。有不足请指出。