uniapp自定义右击菜单

爱喝冰可乐2023-10-21 8:54

效果图：

代码：

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)
	}
}