vue2实现右键菜单功能——vue-diy-rightmenu——基础积累

五一之前遇到一个需求,就是关于要实现自定义右键菜单的功能,普通的右键展示的菜单有【返回/前进/重新加载/另存为】等,希望实现的效果就是右键出现自定义的菜单,比如【编辑/删除/新增】等。

遇到这种的需求,可以直接去npm官网上去搜对应的插件。

在这里插入图片描述
在这里插入图片描述

从这个网站上查到一个自定义右键菜单(vue2版):https://www.npmjs.com/package/vue-diy-rightmenu?activeTab=readme

网站上写的用法及其简单,也没有给具体的例子。

下面记录一下具体的使用:

解决步骤1:安装插件npm i vue-diy-rightmenu

npm i vue-diy-rightmenu

解决步骤2:在main.js中添加以下的代码

import vueDiyRightmenu from 'vue-diy-rightmenu';
Vue.use(vueDiyRightmenu);

解决步骤3:在html中添加如下代码

 <vueDiyRightmenucname="cname"style="color: #67c23a; margin-right: 6px; padding: 2px">测试右键<ul slot="menu"><li @click="rightMenuClick(0)">右键菜单一</li><li @click="rightMenuClick(1)">右键菜单二</li></ul>
</vueDiyRightmenu>

对应的样式:

<style scoped lang="less">
.cname .menu-content ul {width: 200px;background: #fff;border-radius: 6px;box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);text-align: center;border: 1px solid #ebebeb;li {color: #424242;line-height: 40px;font-size: 14px;cursor: pointer;}
}
</style>

对应的点击事件:

rightMenuClick(val) {console.log(val);
},

最终的效果如下:
在这里插入图片描述
解决!!!多多积累,多多收获!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/669851.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 FFmpeg 从音视频中提取音频

有时候我们需要从视频文件中提取音频&#xff0c;并保存为一个单独的音频文件&#xff0c;我们可以借助 FFmpeg 来完成这个工作。 一、提取音频&#xff0c;保存为 mp3 文件: 要使用 FFmpeg 从音视频文件中提取音频&#xff0c;并将 ACC 编码的音频转换为 MP3 格式&#xff0…

天锐绿盾 | 如何保护企业数据安全?

天锐绿盾为企业数据安全提供了一系列综合性的保护措施&#xff0c;确保数据在存储、处理、传输等各个环节的安全性。 PC地址&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 具体措施包括&#xff1a; 文件透明加密&#xff1a;采…

震撼来袭!AI创新燃爆2024中关村论坛,唯迈医疗破解心脑血管“命门”危机

4月29日&#xff0c;备受瞩目的2024中关村论坛圆满闭幕。国内领先的介入诊疗全流程解决方案企业——唯迈医疗&#xff0c;携新一代Taikon太空 DSA和介入手术机器人惊艳亮相&#xff0c;以AI赋能介入诊疗&#xff0c;为心脑血管疾病治疗带来了革命性的突破&#xff0c;引发党央媒…

vcenter安装配置

步骤1 VMware vCenter 7.0 安装 VMware vCenter Server 提供了一个可伸缩、可扩展的平台&#xff0c;为虚拟化管理奠定了基础。可集中管理VMware vSphere环境&#xff0c;与其他管理平台相比&#xff0c;极大地提高了 IT 管理员对虚拟环境的控制。 VMware vCenter Server:提高在…

38-1 防火墙了解

一、防火墙的概念: 防火墙(Firewall),也称防护墙,是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网(US5606668 [A]1993-12-15)。它是一种位于内部网络与外部网络之间的网络安全系统,是一项信息安全的防护系统,依照特定的规则,允许或是限制传输的数据通过。…

clang:在 Win10 上编译 MIDI 音乐程序(一)

先从 Microsoft C Build Tools - Visual Studio 下载 1.73GB 安装 "Microsoft C Build Tools“ 访问 Swift.org - Download Swift 找到 Windows 10&#xff1a;x86_64 下载 swift-5.10-RELEASE-windows10.exe 大约490MB 建议安装在 D:\Swift\ &#xff0c;安装后大约占…

企业监管神器揭秘:如何有效实施监管员工?

在现代企业中&#xff0c;有效的员工监管是保障公司运作顺利的关键。然而&#xff0c;传统的监管方法往往效率低下、成本高昂。随着科技的不断进步&#xff0c;一种新的监管神器应运而生——微信管理系统。 下面就一起来看看他都有哪些功能吧。 首先&#xff0c;微信管理系统…

Python中动画显示与gif生成

1. 动画生成 主要使用的是 matplotlib.animation &#xff0c;具体示例如下&#xff1a; import matplotlib.pyplot as plt import matplotlib.animation as animation import numpy as np fig, ax plt.subplots() t np.linspace(0, 3, 40) g -9.81 v0 12 z g * t**2 / …

为什么下载卡在idealTree:NodeJS: sill idealTree buildDeps

可能使用的是npm config set registry https://registry.npm.taobao.org而这个镜像文件已经过期了 解决方法如下&#xff1a; 先使用 npm cache clean --force 清除缓存 再切换镜像源 再使用npm config get registry 进行查看是否换源成功 再使用 npm install -g vue/cli 就…

小工具 - 用Astyle的DLL封装一个对目录进行代码格式化的工具

文章目录 小工具 - 用Astyle的DLL封装一个对目录进行代码格式化的工具概述笔记效果编译AStyle的DLL初次使用接口的小疑惑测试程序 - 头文件测试程序 - 实现文件测试程序 - RC备注END 小工具 - 用Astyle的DLL封装一个对目录进行代码格式化的工具 概述 上一个实验(vs2019 - ast…

链式队列基本操作

链式队列的基本概念 链式队列是一种常见的数据结构&#xff0c;它使用链表作为其底层数据存储结构。链式队列的特点是动态的内存分配&#xff0c;可以有效地处理队列的入队和出队操作。下面&#xff0c;我将介绍链式队列的实现方法&#xff0c;并提供相应的C语言代码示例。 链…

ABAP开发(3)数据类型和变量

文章目录 1、常用数据类型2、变量定义1、定义基本类型变量2、定义结构体3、定义类型 1、常用数据类型 2、变量定义 在ABAP中&#xff0c;使用关键字DATA定义变量&#xff0c;句号结尾。 1、定义基本类型变量 定义变量ID&#xff0c;字符串&#xff0c;长度20。 DATA ID(20)…