uniapp自定义右击菜单

效果图:

代码:

1、需要右击的view:

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

2、右击弹出层:

javascript 复制代码
<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数据:

javascript 复制代码
data() {
	return {
		visible: false,
    	top: 0,
		left: 0
	}
}

4、js

javascript 复制代码
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)
	}
}
相关推荐
毛毛三由3 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
巴博尔3 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
技术钱3 小时前
uniapp使用音频录音功能
chrome·uni-app·音视频
焚 城4 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
2501_9160074711 小时前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe060111 小时前
🎉 Uni ECharts 2.0 正式发布:原来在 uni-app 中使用 ECharts 可以如此简单!
uni-app·echarts
00后程序员张12 小时前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
2501_9159090615 小时前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063215 小时前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159184115 小时前
开发 iOS 应用全流程指南,环境搭建、证书配置与跨平台使用 开心上架 上架AppStore
android·ios·小程序·https·uni-app·iphone·webview