使用Vue封装一个自定义的右键菜单组件
说在前面
网页的功能和用途可能各不相同，在传统右键菜单栏中无法满足每个用户的个性化需求。通过自定义右键菜单栏，用户可以根据自己的需求添加、调整和删除菜单选项，以实现个性化定制。通过自定义右键菜单栏，可以为用户提供快速访问常用功能和操作的便捷方式，从而提高用户体验。
效果展示
实现原理
1、oncontextmenu事件了解一下
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
oncontextmenu是一个DOM事件，它在用户右键点击时触发。可以通过在HTML元素上添加oncontextmenu属性来指定右键菜单的处理函数。
例如，在一个按钮元素上添加oncontextmenu属性：
<button oncontextmenu="showContextMenu(event)">右键点击我</button>
在这个示例中，当用户右键点击按钮时，会调用showContextMenu函数，并将事件对象作为参数传递给该函数。
在JavaScript代码中，可以定义showContextMenu函数来处理右键菜单的显示和操作：
function showContextMenu(event) {
event.preventDefault(); // 阻止默认的右键菜单弹出
// 显示自定义右键菜单
// ...
}
在showContextMenu函数中，通过调用event.preventDefault()方法阻止浏览器默认的右键菜单弹出。然后，可以根据需要执行自定义的逻辑，例如显示自定义的右键菜单。
2、在指定容器元素自定义右键菜单
首先，使用getElementById方法获取绑定右键菜单的DOM元素和右键菜单的容器元素。如果获取失败，则直接返回。
const dom = document.getElementById(this.domId); if (!dom) return;
接着，给绑定右键菜单的DOM元素添加oncontextmenu事件处理函数。当用户触发右键点击事件时，首先调用hideAllMenu方法隐藏所有的右键菜单，然后通过event.preventDefault方法禁止默认行为，防止浏览器弹出默认的右键菜单。接下来，计算出鼠标指针相对于文档顶部和左侧的位置，并设置右键菜单的位置和显示状态。
const that = this;
dom.oncontextmenu = function (e) {
that.hideAllMenu(that.uid);
// 自定义body元素的鼠标事件处理函数
e = e || window.event;
e.preventDefault();
let scrollTop =
document.documentElement.scrollTop ||
document.body.scrollTop; // 获取垂直滚动条位置
let scrollLeft =
document.documentElement.scrollLeft ||
document.body.scrollLeft; // 获取水平滚动条位置
menu.style.display = "block";
menu.style.left = e.clientX + scrollLeft + "px";
menu.style.top = e.clientY + scrollTop + "px";
};
最后，给document对象添加onclick事件处理函数。当用户在其他位置点击鼠标时，调用hideAllMenu方法隐藏所有的右键菜单。
document.onclick = function () {
that.hideAllMenu();
};
hideAllMenu(id) {
const jMenu = document.getElementsByClassName("j-mouse-menu");
for (let i = 0; i < jMenu.length; i++) {
if (jMenu[i].id != id) jMenu[i].style.display = "none";
}
},
3、封装成一个组件
（1）template菜单模板
<div :id="uid" class="j-mouse-menu">
<slot name="header"></slot>
<ul>
<li
v-for="menuItem in menu"
:key="menuItem.id"
@click="menuClick(menuItem)"
>
{{ menuItem.label }}
</li>
</ul>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
使用:id="uid"绑定了组件的id属性，该属性值由组件实例的uid属性提供。这样可以确保每个组件实例都有唯一的id。
然后，给组件添加了j-mouse-menu类，用于设置组件的样式。
在组件的内容区域中，使用了Vue的插槽机制。
<slot name="header"></slot>定义了一个名为"header"的插槽，用于放置菜单栏的头部内容。<ul>标签下使用了v-for指令遍历menu数组，生成菜单项。- 菜单项使用
<li>标签表示，并通过:key绑定了唯一的menuItem.id作为key值。 - 通过
@click绑定了menuClick方法，该方法会在点击菜单项时被调用。 - 菜单项的显示文本使用插值语法
{{ menuItem.label }}来动态显示。
接下来，又定义了两个插槽：
<slot name="body"></slot>用于放置菜单栏的主体内容。<slot name="footer"></slot>用于放置菜单栏的底部内容。
（2）props入参
props: {
domId: {
type: String,
default: "",
},
menu: {
type: Array,
default: () => {
return [];
},
},
},
domId表示需要绑定右键菜单的DOM元素容器的id，menu表示右键菜单的选项列表，menu数据格式如下：
[
{
id: "1",
label: "菜单1"
},
{
id: "2",
label: "菜单2",
click: this.test
},
{
id: "3",
label: "菜单3"
},
{
id: "4",
label: "菜单4"
},
{
id: "5",
label: "菜单5"
}
]
（3）菜单点击回调
menuClick(item) {
if (item.click) {
item.click(item);
return;
}
this.$emit("menuClick", item);
},
首先判断item对象是否存在click属性。如果存在，则执行item.click(item)，并将item作为参数传递给click函数。然后，返回结束方法的执行。
如果item对象不存在click属性，即没有自定义的点击处理函数，那么就通过this.$emit("menuClick", item)语法触发一个名为"menuClick"的自定义事件，并将item作为参数传递给父组件。
（4）完整组件代码
<template>
<div>
<div :id="uid" class="j-mouse-menu">
<slot name="header"></slot>
<ul>
<li
v-for="menuItem in menu"
:key="menuItem.id"
@click="menuClick(menuItem)"
>
{{ menuItem.label }}
</li>
</ul>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
import { getUId } from "../../../utils/strTool";
export default {
name: "JMouseMenu",
props: {
domId: {
type: String,
default: "",
},
menu: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
uid: "",
};
},
created() {
this.setUid();
},
mounted() {
this.init();
},
methods: {
setUid() {
this.uid = "j-mouse-menu-" + getUId();
},
init() {
// 自定义鼠标右键菜单栏
const dom = document.getElementById(this.domId);
if (!dom) return;
const menu = document.getElementById(this.uid);
const that = this;
dom.oncontextmenu = function (e) {
that.hideAllMenu(that.uid);
// 自定义body元素的鼠标事件处理函数
e = e || window.event;
e.preventDefault();
let scrollTop =
document.documentElement.scrollTop ||
document.body.scrollTop; // 获取垂直滚动条位置
let scrollLeft =
document.documentElement.scrollLeft ||
document.body.scrollLeft; // 获取水平滚动条位置
menu.style.display = "block";
menu.style.left = e.clientX + scrollLeft + "px";
menu.style.top = e.clientY + scrollTop + "px";
};
// 鼠标点击其他位置时隐藏菜单
document.onclick = function () {
that.hideAllMenu();
};
},
hideAllMenu(id) {
const jMenu = document.getElementsByClassName("j-mouse-menu");
for (let i = 0; i < jMenu.length; i++) {
if (jMenu[i].id != id) jMenu[i].style.display = "none";
}
},
menuClick(item) {
if (item.click) {
item.click(item);
return;
}
this.$emit("menuClick", item);
},
},
};
</script>
<style lang="less" scoped>
.j-mouse-menu {
display: none;
position: absolute;
min-width: 8em;
max-width: 15em;
border: 1px solid #ccc;
background: #eee;
ul {
margin: 5px 0;
padding: 0;
}
li {
height: 30px;
line-height: 30px;
color: #21232e;
font-size: 12px;
text-align: center;
cursor: default;
padding: 0;
margin: 0;
list-style-type: none;
border-bottom: 1px dashed #cecece;
&:hover {
background-color: #cccccc;
}
}
}
</style>
(5)组件使用
<j-mouse-menu
:domId="'j-mouse-menu-view-content1'"
:menu="myMenu"
@menuClick="menuClick"
>
<template v-slot:header>
<div class="menu-slot-header">🌝JYeontu</div>
</template>
<template v-slot:footer>
<div class="menu-slot">
🦁🐼
</div>
</template>
</j-mouse-menu>
通过插槽自定义右键菜单的头部和底部内容，菜单列表通过menu参数传入子组件，并绑定菜单点击事件menuClick。
data(){
return {
myMenu: [
{
id: "1",
label: "菜单1"
},
{
id: "2",
label: "菜单2",
click: this.test
},
{
id: "3",
label: "菜单3"
},
{
id: "4",
label: "菜单4"
},
{
id: "5",
label: "菜单5"
}
]
}
},
methods:{
menuClick(menuItem) {
alert("点击了：" + menuItem.label);
},
test(menuItem) {
alert("test-" + menuItem.id);
},
alert(label) {
alert("点击了：" + label);
}
}
组件库
组件文档
目前该组件也已经收录到我的组件库，组件文档地址如下：http://jyeontu.xyz/jvuewheel/#/JMouseMenu
组件内容
组件库中还有许多好玩有趣的组件，如：
- 悬浮按钮
- 评论组件
- 词云
- 瀑布流照片容器
- 视频动态封面
- 3D轮播图
- web桌宠
- 贡献度面板
- 拖拽上传
- 自动补全输入框
- 图片滑块验证
等等……
组件库源码
组件库已开源到gitee，有兴趣的也可以到这里看看：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse
以上就是使用Vue封装一个自定义的右键菜单组件的详细内容，更多关于Vue自定义右键菜单组件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Vue中的v-for循环key属性注意事项小结,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了过滤器vue.filters的使用方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了Vue子组件关闭后调用刷新父组件的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
关于element ui的菜单default-active默认选中的问题
这篇文章主要介绍了关于element ui的菜单default-active默认选中的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
vue-router 是 Vue.js 官方的路由库.这篇文章主要介绍了vue-router项目实战总结,需要的朋友可以参考下2018-02-02
这篇文章主要给大家介绍了关于Vue中forEach()使用方法的相关资料,forEach和map是数组的两个方法,作用都是遍历数组,在vue项目的处理数据中经常会用到,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了webstrom Debug 调试vue项目的方法步骤，详细的介绍了两种调试vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了vue路由传参及获取参数的方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章给大家分享Vue3搭建组件库开发环境，给大家讲解依次搭建组件库、example、文档、cli，本文内容是搭建组件库的开发环境的过程，感兴趣的朋友跟随小编一起看看吧2022-11-11
最新评论