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)
	}
}
相关推荐
Little_Code1 小时前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
儿歌八万首2 小时前
uniapp 和原生插件交互
uni-app·交互
前端 贾公子11 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
源码_V_saaskw9 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
xw510 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝
!win !10 天前
支付宝小程序IDE版本迭代异常
uni-app·支付宝小程序
xw510 天前
抖音小程序支付错误码141211
uni-app·抖音小程序
好好的哦10 天前
抖音小程序支付错误码141211
小程序·uni-app
anyup10 天前
uni-app 应用隐私政策怎么写?一份模板+实用技巧送给你
前端·uni-app·cursor
郭玉齐10 天前
uniapp+vue3做小程序,获取容器高度
小程序·uni-app