vue实现右键弹出菜单
作者:早起的小笨鸡 发布时间:2024-05-21 10:17:41
标签:vue,右键,菜单
在最近工作中,有一个需求,需要做一个表格,并且对该表格右键弹出菜单支持增删改,这里做下总结,功能截图如下:
首先定义菜单结构
<!-- 菜单 -->
<div class="menu-list" :style="{position:'fixed',top:top+'px',left:left+'px'}" v-if="visible">
? ? <div class="menu" v-for="(item,index) in menuList">
? ? ? ? <div v-if="item=='插入图片'||item=='更换图片'">
? ? ? ? ? ?? <el-upload class="upload-demo"
? ? ? ? ? ? ? ? ? ? ? ? ?action=""
? ? ? ? ? ? ? ? ? ? ? ?:accept="$pubTool.UPLOADIMGFORMAT"
? ? ? ? ? ? ? ? ? ? ? ? ?:auto-upload="false"
? ? ? ? ? ? ? ? ? ? ? ? :show-file-list="false"
? ? ? ? ? ? ? ? ? ? ? ? ?:limit="1"
? ? ? ? ? ? ? ? ? ? ? ? ?:on-exceed="(files) => { selectedFileMore(files, 'img', 'script_filePath', 0,0, 1, 'NONE', false); addImg(); }"
? ? ? ? ? ? ? ? ? ? ? ? ?:on-change="(file) => { selectedFile(file, 'img', 'script_filePath', 0,0, 1, 'NONE', false); addImg(); }">
? ? ? ? ? ? ? ? ? ? ? ? <div>{{item}}</div>
? ? ? ? ? ? ? ? ? ? </el-upload>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div v-if="item=='插入视频'||item=='更换视频'">
? ? ? ? ? ? ? ? ? ? <el-upload class="upload-demo"
? ? ? ? ? ? ? ? ? ? ? ? ?action=""
? ? ? ? ? ? ? ? ? ? ? ? ?:accept="$pubTool.UPLOADVIDEOFORMAT"
? ? ? ? ? ? ? ? ? ? ? ? ?:auto-upload="false"
? ? ? ? ? ? ? ? ? ? ? ? ?:show-file-list="false"
? ? ? ? ? ? ? ? ? ? ? ? ?:limit="1"
? ? ? ? ? ? ? ? ? ? ? ? ?:on-exceed="(files) => { selectedFileMore(files, 'video', 'script_filePath', 1,1, 1, 'script_fileCover', true); addVideo(); }"
? ? ? ? ? ? ? ? ? ? ? ? ?:on-change="(file) => { selectedFile(file, 'video', 'script_filePath', 1, 1,1, 'script_fileCover', true); addVideo(); }">
? ? ? ? ? ? ? ? ? ? ? ? <div>{{item}}</div>
? ? ? ? ? ? ? ? ? ? </el-upload>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div v-if="item=='插入附件'||item=='更换附件'">
? ? ? ? ? ? ? ? ? ? <el-upload class="upload-demo"
? ? ? ? ? ? ? ? ? ? ? ? ? action=""
? ? ? ? ? ? ? ? ? ? ? ? ? :accept="$pubTool.UPLOADSCRIPTFORMAT"
? ? ? ? ? ? ? ? ? ? ? ? ??:auto-upload="false"
? ? ? ? ? ? ? ? ? ? ? ? ??:show-file-list="false"
? ? ? ? ? ? ? ? ? ? ? ? ? :limit="1"
? ? ? ? ? ? ? ? ? ? ? ? ? multiple
? ? ? ? ? ? ? ? ? ? ? ? ? ?:on-exceed="(files) => { selectedFileMore(files, 'annex', 'script_filePath', 4,1, 1, 'script_fileCover', true); addAnnex(); }"
? ? ? ? ? ? ? ? ? ? ? ? ? ?:on-change="(file) => { selectedFile(file, 'annex', 'script_filePath', 4, 1,1, 'script_fileCover', true); addAnnex(); }">
? ? ? ? ? ? ? ? ? ? ? ? <div>{{item}}</div>
? ? ? ? ? ? ? ? ? ? </el-upload>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div v-if="item=='插入链接'||item=='更换链接'" @click="operHref.ifShow = true">
? ? ? ? ? ? ? ? ? ? {{item}}
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div v-if="item=='清空单元格'" @click="clearCell">
? ? ? ? ? ? ? ? ? ? {{item}}
? ? ? ? ? ? ? </div>
? ? ? ?</div>
</div>
js代码
data() {
? ? ? ? ? ? return {
? ? ? ? ? ?
? ? ? ? ? ? ? ? visible: false,//菜单隐藏控制
? ? ? ? ? ? ? ? td_index: 0,//当前点击的单元格列下标
? ? ? ? ? ? ? ? tr_index: 0,//当前点击的单元格行下标
? ? ? ? ? ? ? ? top: 0,
? ? ? ? ? ? ? ? left: 0,
? ? ? ? ? ? ? ? menuList: ["插入图片", "插入视频", "插入链接", "插入附件", "更换图片", "更换视频", "更换链接", "更换附件", "清空单元格"],
? ? ? ? ? ??
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? watch: {
? ? ? ? ? ? //监听visible的变化,来触发关闭右键菜单,调用关闭菜单的方法
? ? ? ? ? ? visible(value) {
? ? ? ? ? ? ? ? if (value) {
? ? ? ? ? ? ? ? ? ? document.body.addEventListener('click', this.closeMenu)
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? document.body.removeEventListener('click', this.closeMenu)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? ?//鼠标右键事件--打开菜单
? ? ? ? ? ? openMenu(e, item, td_index, tr_index) {
? ? ? ? ? ? ? ? if (item.ifR || this.action == 'detail' || this.action == 'version' || item.cU == 1) return;
? ? ? ? ? ? ? ? if (item.ifR == 0 && item.cT == 22860 && item.cV.cD) this.menuList = ["清空单元格"];
? ? ? ? ? ? ? ? if (item.ifR == 0 && item.cT == 22861 && item.cV.cD) this.menuList = ["更换图片", "清空单元格"];
? ? ? ? ? ? ? ? if (item.ifR == 0 && item.cT == 22862 && item.cV.cD) this.menuList = ["更换视频", "清空单元格"];
? ? ? ? ? ? ? ? if (item.ifR == 0 && item.cT == 22863 && item.cV.cD) this.menuList = ["更换链接", "清空单元格"];
? ? ? ? ? ? ? ? if (item.ifR == 0 && item.cT == 22864 && item.cV.cD) this.menuList = ["更换附件", "清空单元格"];
? ? ? ? ? ? ? ? if (item.ifR == 0 && (item.cT == 22860 || item.cT == 22861 || item.cT == 22862 || item.cT == 22863 || item.cT == 22864) && item.cV.cD == '') this.menuList = ["插入图片", "插入视频", "插入链接", "插入附件", "清空单元格"];
? ? ? ? ? ? ? ? //this.rightClickItem = item;
? ? ? ? ? ? ? ? let x = e.clientX;
? ? ? ? ? ? ? ? let y = e.clientY;
? ? ? ? ? ? ? ? this.top = y;
? ? ? ? ? ? ? ? this.left = x;
? ? ? ? ? ? ? ? this.td_index = td_index;
? ? ? ? ? ? ? ? this.tr_index = tr_index;
? ? ? ? ? ? ? ? this.visible = true;
? ? ? ? ? ? },
? ? ? ? ? ? //鼠标右键事件--关闭菜单
? ? ? ? ? ? closeMenu() {
? ? ? ? ? ? ? ? this.visible = false;
? ? ? ? ? ? },
来源:https://blog.csdn.net/weixin_47783830/article/details/125719234


猜你喜欢
- 本文实例为大家分享了Django文件上传与下载的具体代码,供大家参考,具体内容如下Django1.4首先是上传:#settings.pyME
- 呵,以前也没考虑过这方面的东西,现在写的代码越来越多,越来越复杂,如果再不把不用的变量及时释放掉,到时肯定会出问题。今天无意中在无忧Q群里看
- 一、下载instant client1.附链接:http://www.oracle.com/technetwork/topics/winx6
- 近来,随着XHTML(可扩展HTML)标准的出现,<script/>标签也经历了一些改变。该标签不再用language特性,而用
- 一、简单介绍正则表达式是一种小型的、高度专业化的编程语言,并不是python * 有的,是许多编程语言中基础而又重要的一部分。在python中
- 读写 JSON 数据问题你想读写 JSON(JavaScript Object Notation) 编码格式的数据。解决方案json模块提供
- MySQL是一个功能强大的开源数据库。随着越来越多的数据库驱动的应用程序,人们一直在推动MySQL发展到它的极限。这里是100条调节和优化M
- 如果将程序员分为本文的8种类型,你会是哪一种呢?在求职的时候,相信很多人都被问过这样的问题,“你对自己未来5年的职业规划是怎么样的?” 每当
- 本文实例讲述了Python动态生成多维数组的方法。分享给大家供大家参考,具体如下:多维数组其实就是多个一维数组的嵌套,Python中有原生的
- python部分#!/usr/bin/env Python# coding=utf-8from ctypes import *from Py
- 背景写代码的时候,你会发现你的代码越写越多。然而,功能需要也越来越多,然后你的冗余代码就多得不能再多了~~~怎么办,我太难了。那就寻求一些高
- 介绍Python常见的字符串处理方式字符串截取 >>>s = 'hello'>>>s[0
- 一、安装mysqlclient网上看到很过通过命令:pip install mysqlclient 进行安装的教程,但是我却始终安装失败,遇
- 本文实例讲述了JavaScript基于setTimeout实现计数的方法。分享给大家供大家参考。具体实现方法如下:var count = 0
- 一、foreach()循环对数组内部指针不再起作用,在PHP7之前,当数组通过foreach迭代时,数组指针会移动。现在开始,不再如此,见下
- 一、爬虫框架Scarpy简介Scrapy 是一个快速的高层次的屏幕抓取和网页爬虫框架,爬取网站,从网站页面得到结构化的数据,它有着广泛的用途
- MySQL的Explain命令用于查看执行效果。虽然这个命令只能搭配select类型语句使用,如果你想查看update,delete类型语句
- 写在前面的话基于dlib库的模型,实现人脸识别和焦点人物的检测。最后呈现的效果为焦点人物的识别框颜色与其他人物框不一样。准备工作需要安装好p
- 应用场景1.需要将大型MP3文件切割成较小的部分以便上传或发送。2.需要从MP3文件中提取特定的音频片段,以便用于其他目的。3.需要快速制作
- set oSQLServer =server.createobject("SQLDMO.SQLServer"