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)
	}
}
相关推荐
笨笨狗吞噬者9 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
性能优化·微信小程序·uni-app
NoneSL11 小时前
Uniapp UTS插件开发实战:引入第三方SDK
前端·uni-app
_AaronWong19 小时前
微信小程序同声传译插件接入实战:语音识别功能完整实现指南
前端·微信小程序·uni-app
赵庆明老师1 天前
Uniapp微信小程序开发:http请求封装。
http·微信小程序·uni-app
雪芽蓝域zzs1 天前
uniapp AES 加密解密
开发语言·uni-app·c#
我是高手高手高高手1 天前
uni-app x 左右滑动效果
uni-app
居安思危_Ho2 天前
RK平台Uniapp自启动缓存问题解决
android·缓存·uni-app·rk平台·uniapp资源文件
你真的可爱呀2 天前
uniapp学习【项目创建+项目结构解析】
学习·uni-app
小小弯_Shelby2 天前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
卷Java2 天前
百度AI车牌识别配置指南
java·开发语言·百度·uni-app·dubbo·微信公众平台