uniapp自定义右击菜单

news2024/11/15 21:05:35

效果图:

请添加图片描述

代码:

1、需要右击的view:

<view class="answer-box" @contextmenu.stop.prevent.native="showRightMenu($event, item, 'content')">
</view>

2、右击弹出层:

<view v-if="visible" :style="{ left: left + 'px', top: top + 'px' }" class="newcontextmenu"
	name="newcontextmenu">
	<view class="editItem" @click.stop="checkadditem">
		<u-icon name="plus-circle-fill"></u-icon>
		添加子分类
	</view>

	<view class="editItem" @click.stop="checkdeleteContent">
		<u-icon name="trash-fill"></u-icon>
		删除
	</view>
	<view class="editItem" @click.stop="checkeditContent">
		<u-icon name="edit-pen-fill"></u-icon>
		编辑
	</view>
</view>

3、data数据:

data() {
	return {
		visible: false,
    	top: 0,
		left: 0
	}
}

4、js

methods: {
	showRightMenu(e, item, type) {
		console.log(e, item, type, 'eeeeee')
		setTimeout(() => {
			let x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标,左上角为坐标原点(0,0)
			let y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标,左上角为坐标原点(0,0)
			this.top = y;
			this.left = x;
			this.visible = true;
		}, 100)
	}
}

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

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

相关文章

001.第一个C语言项目

Visual studio2022的使用 创建第一个C语言项目和源文件 https://blog.csdn.net/qq_45037165/article/details/124520286 第一个C语言项目 #include<stdio.h> int main() {printf("Hello World");return 0; }运行结果&#xff1a; 第一行为库函数&#xff0…

docker容器健康状态健康脚本

代码&#xff1a; #!/bin/bash# 定义要监控的容器名称 container_name"mysql-container"# 使用Docker命令来检查容器的运行状态 container_status$(docker inspect --format"{{.State.Status}}" "$container_name")# 检查容器状态并进行相应操作…

PAM从入门到精通(十五)

接前一篇文章&#xff1a;PAM从入门到精通&#xff08;十四&#xff09; 本文参考&#xff1a; 《The Linux-PAM Application Developers Guide》 先再来重温一下PAM系统架构&#xff1a; 更加形象的形式&#xff1a; 六、整体流程示例 1. 官方文档中的例程及解析 从PAM从入…

数字人引领政务革新,AI智慧政务一体机的未来服务之路

数字人、数字员工&#xff0c;已是当下不可忽视的新型劳动者&#xff0c;它们在众多领域频频出圈&#xff0c;持续打破人们的固有认知。在近期公布的2023数字人实践案例TOP10里&#xff0c;CCTV央视网数字代言人阿央”带领新一代青年紧跟国家大事、关注国家发展&#xff1b;首位…

Java操作Python及数据交互最佳实践

Java操作Python最佳实践 1、Java与Python的互操作性2、Java调用Python脚本及数据交互2.1、准备工作2.2、执行一段Python代码2.3、执行Python文件脚本2.4、执行Python文件中的指定方法2.5、执行含有第三方库的Python文件3、附录(完整代码)1、Java与Python的互操作性 在当今的软…

Mac电脑无法识别移动硬盘怎么办?

很多人都喜欢在Mac电脑上办公、学习&#xff0c;但有时我们将移动硬盘连接Mac电脑时&#xff0c;却会发现电脑无法识别移动硬盘。那么&#xff0c;Mac电脑无法识别移动硬盘怎么办呢&#xff1f; Mac无法识别移动硬盘的原因 导致Mac不识别移动硬盘的原因有很多&#xff0c;你可…

交换机知识汇总大全,值得收藏!

下午好&#xff0c;我的网工朋友。 说到网工相关的网络设备&#xff0c;你的第一反应是啥&#xff1f;答案基本上都是交换机&#xff0c;是吧。 交换机作为网工最常用的设备之一&#xff0c;你懂多少&#xff1f; 今天想带你温顾一番交换机的基础知识&#xff0c;顺便说说&a…

iOS如何实现语音转文字功能?

1.项目中添加权限 Privacy - Speech Recognition Usage Description : 需要语音识别权限才能实现语音转文字功能 2.添加头文件 #import <AVFoundation/AVFoundation.h> #import<Speech/Speech.h> 3.实现语音转文字逻辑: 3.1 根据wav语音文件创建请求 SFSpeechU…

Macos文件列表创建工具:Nifty File Lists for mac

Nifty File Lists Mac是一款功能强大的文件列表工具&#xff0c;它可以帮助用户在Mac电脑上保存、整理和编辑文件列表。该软件支持将文件列表保存为MS Excel、数字和页面友好的CSV&#xff08;逗号分隔值&#xff09;、TSV&#xff08;制表符分隔值&#xff09;甚至HTML格式&am…

并发程序设计

一、进程的创建和回收 (一)进程的概念 1、进程&#xff01;程序 程序是静态的&#xff0c;而进程是动态的&#xff0c;进程是程序执行的一种状态。 2、进程和程序的区别 1&#xff09;进程控制块中包含进程的属性 2&#xff09;程序在磁盘里面&#xff0c;堆栈都是在内存中…

【TA 挖坑05】效果:空间切换 场景切换

不知不觉挖坑都第5篇了&#xff0c;&#xff0c;&#xff0c;&#xff0c;再不填坑就成挖坑专业户拉&#xff01;&#xff01;&#xff01; 记录一下想实现的效果&#xff0c;实际上之前尝试从shader层面做能看得过去的&#xff0c;但是应用起来很拉跨&#xff0c;必须场景所有…

多模态GPT-V出世!36种场景分析ChatGPT Vision能力,LMM将全面替代大语言模型? | 京东云技术团队

LMM将会全面替代大语言模型&#xff1f;人工智能新里程碑GPT-V美国预先公测&#xff0c;医疗领域/OCR实践166页GPT-V试用报告首发解读 ChatGPT Vision&#xff0c;亦被广泛称为GPT-V或GPT-4V&#xff0c;代表了人工智能技术的新里程碑。作为LMM (Large Multimodal Model) 的代表…

Redis:2023年的必修课,不学就要被市场淘汰

一、同样是缓存&#xff0c;用map不行吗&#xff1f; Redis可以存储几十个G的数据&#xff0c;Map行吗&#xff1f;Redis的缓存可以进行本地持久化&#xff0c;Map行吗&#xff1f;Redis可以作为分布式缓存&#xff0c;Map只能在同一个JVM中进行缓存&#xff1b;Redis支持每秒…

Redux 学习笔记

在使用 React Redux 前&#xff0c;我们首先了解一下 Redux 的一些基础知识。 Redux 是 JavaScript 应用程序中用于状态管理的容器。它不依赖于任何框架&#xff0c;可以与任何 UI 库和框架一起使用。在应用程序中使用 Redux 时&#xff0c;Redux 是以可预测的方式管理状态。 …

鸿蒙HarmonyOS应用开发:扫描仪文件扫描

华为鸿蒙HarmonyOS已经发展到4.0&#xff0c;使用ArkTS作为开发语言。这篇文章结合Dynamsoft Service开发一个简单的鸿蒙应用&#xff0c;用来获取办公室里连接PC的扫描仪(惠普&#xff0c;富士通&#xff0c;爱普生&#xff0c;等)&#xff0c;把文档扫描到手机里。 准备工作…

Python 3.12.0 Release 版本

本心、输入输出、结果 文章目录 Python 3.12.0 Release 版本前言与 Python 3.11 相比&#xff0c;Python 3.12 系列主要更新了哪些新的功能更灵活的 f 字符串解析&#xff0c;允许许多以前不允许的事情 &#xff08;PEP 701&#xff09;。支持 Python 代码中的缓冲区协议 &…

Unity实现方圆X范围随机生成怪物

using System.Collections; using System.Collections.Generic; using UnityEngine;public class CreatMonster : MonoBehaviour {// S这个脚本间隔一点时间生成怪物/*1.程序逻辑* 1. 设计一个计时器* 2.间隔一段时间3s执行一下 * */float SaveTime 0f;public GameObject …

【215. 数组中的第K个最大元素】

目录 一、题目描述二、算法原理三、代码实现 一、题目描述 二、算法原理 三、代码实现 class Solution { public:int getRandom(int left,int right,vector<int>& nums){return nums[rand()%(right-left1)left];}int qsort(int l,int r,vector<int>& nums…

已经有多人中招,不要被AI换脸技术骗了!

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精…

LinkedList 源码解析(JDK1.8)

目录 一. 前言 二. 常用方法 三. 源码解析 3.1. 属性和内部类 3.2. 构造函数 3.3. 添加元素 3.4. 获取元素 3.5. 删除元素 3.6. 迭代器 3.6.1. 头到尾方向的迭代 3.6.2. 尾到头方向的迭代 3.6.3. add() 插入元素 3.6.4. remove() 移除元素 一. 前言 LinkedList同时…