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.mzph.cn/news/832670.shtml

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

相关文章

jetson实操(二):jetson nano发送短信到指定用户

文章目录 一、准备工作二、代码实现 一、准备工作 腾讯云网址&#xff1a;点击 注&#xff1a;需先申请“短信签名”和“短信正文”&#xff0c;按照要求填写申请即可&#xff0c;腾讯云的审核效率还是很快的&#xff0c;一般在1-2个小时内就会有结果&#xff0c;链接&…

STM32-DAC

DAC 前言一、理论介绍二、DAC代码三、实验结果总结 前言 前言写个参考吧 STM32 DAC串口 一、理论介绍 DAC是数字模拟转换器&#xff08;Digital to Analog Converter&#xff09;的缩写&#xff0c;它是一种将数字信号转换为模拟信号的设备。 RC有2个通道。 DAC的初始化 #…

组件化开发根组件

目录 一、组件化开发介绍 二、根组件 一、组件化开发介绍 组件化&#xff1a;一个页面可以拆分成一个个组件&#xff0c;每个组件有着自己独立的结构、样式、行为。 好处&#xff1a;便于维护&#xff0c;利于复用&#xff0c;提升开发效率。 二、根组件 组件分类&#xff…

MvvmLight 框架的使用

前言 WPF开发中MVVM是一定要会使用的。本文就MvvmLight的基本使用做一下介绍。 1.安装 在NuGet中找MvvmLight 如图&#xff0c;右边有一个[安装]按钮。安装时有一个提示点【我接受】就可以继续安装了。 安装好后的效果&#xff1a; 安装好后会多一个ViewModel文件夹。有两个类…

多商户Docker Supervisor进程管理器部署

Dockerfile 根目录下没有Dockerfile的可以复制下面的命令 # 使用基础镜像 FROM leekay0218/crmeb-mer## 复制代码 ## 在本地调试注释掉&#xff0c;使用映射把文件映射进去 #ADD ./ /var/www# 设置工作目录 WORKDIR /var/www# 设置时区为上海 ENV TZAsia/Shanghai RUN ln -sn…

SeetaFace6人脸检测C++代码实现Demo

SeetaFace6包含人脸识别的基本能力&#xff1a;人脸检测、关键点定位、人脸识别&#xff0c;同时增加了活体检测、质量评估、年龄性别估计&#xff0c;并且顺应实际应用需求&#xff0c;开放口罩检测以及口罩佩戴场景下的人脸识别模型。 官网地址&#xff1a;https://github.co…

burp靶场sql注入通关—下

第十一关&#xff08;布尔盲注&#xff09;&#xff1a; 1.根据提示修改包含 TrackingId cookie的请求&#xff0c;先抓包并修改这个值&#xff0c;在后面加上永真式发现出现Welcome back TrackingIdxxxx and 11 再修改这个值为永假式看看&#xff0c;发现没有Welcome back&am…

OpenNJet下载安装及入门实战教程

一、什么是OpenNJet OpenNJet是一款开放原子开源基金会孵化及运营的开源项目。OpenNJet采用C语言实现。是一款高性能、轻量级的WEB应用及代理软件。    OpenNJet 应用引擎是高性能、轻量级的WEB应用与代理软件。作为云原生服务网格的数据平面&#xff0c;NJet具备动态配置加载…

python数据分析所需要的语法基础

Python语言基础——语法基础 前言语法基础变量标识符数据类型输入与输出代码缩进与注释 总结 前言 对于学过C语言的人来说&#xff0c;python其实很简单。学过一种语言&#xff0c;学习另一种语言&#xff0c;很显然的能感觉到&#xff0c;语言大体上都是相通的。当然&#xf…

企业微信hook接口协议,ipad协议http,客户群发送任务,获取要发送的客户群列表

客户群发送任务&#xff0c;获取要发送的客户群列表 参数名必选类型说明uuid是String每个实例的唯一标识&#xff0c;根据uuid操作具体企业微信 请求示例 {"uuid": "1688853790533324","id":1101292747044333637, //群发任务id"keyword…

3.栈和队列(汇总版)

目录 1.栈&#xff08;一端插和删&#xff09; 2.队列&#xff08;一端插另一段删&#xff09; 2.1队列的概念及结构 2.2 队列的实现 队列的接口 1.初始化队列 2.销毁队列 3.插入元素 4.出队列&#xff08;头删&#xff09; 5.访问对头 6.访问队尾 7.判断队列是否为…

CMakeLists.txt语法规则:foreach循环的关键字

一. 简介 前一篇文章学习了 CMakeLists.txt语法中 foreach循环的基本用法。文章如下&#xff1a; CMakeLists.txt语法规则&#xff1a;foreach 循环基本用法-CSDN博客 本文继续 CMakeLists.txt语法中 foreach循环语句&#xff0c;主要学习 foreach循环中的关键字。 二. CM…

Android 官网Ota介绍

构建 OTA 软件包 | Android 开源项目 | Android Open Source Project

(网络初识)

网络发展史 独立模式 在最开始计算机被发明出来&#xff0c;但网络还未普及的情况下&#xff0c;每个计算机之间都是相互独立的&#xff1a; 假设现在有一份数据需要处理&#xff0c;然后这份数据的处理又分给三个人分别处理。假设小松处理进行第一部分的处理&#xff0c;当小…

Skywalking的重要功能详解

学习本篇文章之前首先要了解一下Sky walking的基础知识 分布式链路追踪工具Sky walking详解 一&#xff0c;Sky walking监控数据库 在admin服务中&#xff0c;连接数据库查询user表中所有数据 引入依赖 <dependency><groupId>mysql</groupId><artifactI…

上位机图像处理和嵌入式模块部署(树莓派4b和qt应用全屏占有)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们都知道&#xff0c;嵌入式应用一般都是为了某一个特定应用而存在的。也就是说&#xff0c;和pc不同&#xff0c;这个嵌入式板子一般都是为了解…

多组间比较散点图+误差棒(自备)

目录 数据 计算四分位值 作图 数据 rm(list ls()) library(ggplot2) library(dplyr) library(ggpubr) library(reshape2) library(tidyverse)data <- iris##鸢尾花数据集 dat <- data[,c(5,1)]#单个数据进行分析 计算四分位值 #根据分组计算四分位及中位数 dat1 …

使用Docker安装Redis

大家好&#xff0c;今天给大家分享一下如何使用docker安装Redis&#xff0c;关于docker的安装和常用命令&#xff0c;大家可以参考下面两篇文章&#xff0c;本文中不做过多描述。 Docker在Windows与CentOS上的安装 Docker常用命令 关于Redis的介绍与常用操作可以参考&#x…

中国科技大航海时代,“掘金”一带一路

文&#xff5c;白 鸽 编&#xff5c;王一粟 “这不就是90年代的内地吗&#xff1f;” 在深度考察完沙特市场后&#xff0c;华盛集团联合创始人兼CEO张霆对镜相工作室感慨道。 在张霆看来&#xff0c;沙特落后的基建&#xff08;意味着大量创新空间&#xff09;、刚刚开放…

AHB---数据总线

1. 数据总线 为了实现AHB系统&#xff0c;需要独立的读写数据总线。虽然推荐的最小数据总线宽度被指定为32位&#xff0c;但这可以根据数据总线宽度进行更改。 数据总线包含以下部分&#xff1a; HWDATAHRDATAEndianness&#xff08;字节序&#xff09; 1.1 HWDATA 在写传输…