vue 自定义右键样式的实例代码

2023-08-09 19:09:04 147

最近用python写了个小说程序的api，想着用vue做个系统管理数据，脑子里出现的是这个画面：

但是这种样式的管理后台已经做了太多了，已经审美疲劳，后面又想了一种类操作系统的UI界面:

主要是靠双击和右键来操作，可操作多个模态框，跟操作windows类似，接下来在里面拆出一个功能块来写一篇文章，就是自定义系统默认的右键。

自定义右键操作有五个步骤：阻止默认右键。获取当前右键点击时的x/y坐标，及id。自定义右键菜单样式及内容，定位在指定的位置后显示。返回对应点击目录的事件如:查看、删除、编辑。在任何地方点击左键时隐藏右键菜单。关键方法：

@contextmenu.prevent

这个是vue内置的，点击右键（阻止默认右键的默认行为）的一个回调方法，他返回了一大串东西这里我用到的是这两个(用于定位显示菜单的x,y位置)

x_index，y_index是储存在data中的，用于定位模态框位置。

ctrlId用于给接口处理的依据

showMenu用于判断是否显示右键菜单




	
	{{item.name}}

需要的参数(x,y,id)都具备了，因为右键操作很多地方都用到了，所以封装成了一个组件

right_menu.vue组件代码参数名注释xx坐标yy坐标showMenu显示状态

参数名	注释
x	x坐标
y	y坐标
showMenu	显示状态

组件使用

修复漏洞

d[o_0]b同学发现了一个漏洞，就是当鼠标在屏幕右边点击时，菜单会被遮挡住，这边做了一些调整。

修复前：

//原来的代码


	
	{{item.name}}

修复后：

//修改后的代码，（由于要判断，所以单独写了个方法，把e跟item都传过去）

	
		
		{{item.name}}
	


//对应的rightClick方法
rightClick(e,item){
	//屏幕可见宽
	letclientWidth=document.body.clientWidth;
	//菜单宽
	letmenuWidth=150;
	//点击右键时会返回对应的clientX，用这个值与(clientWidth+菜单宽度)对比，如果大于的话，就把菜单左偏移一个菜单宽
	letclickClientX=e.clientX+menuWidth
	if(clickClientX>clientWidth){
		console.log("菜单超出视线范围")
		this.x_index=e.layerX-menuWidth;
	}else{
		this.x_index=e.layerX;
	}
	this.y_index=e.layerY;
	this.ctrlId=item.id;
	this.showMenu=true;
},

总结

以上所述是小编给大家介绍的vue自定义右键样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 自定义右键样式的实例代码

热门推荐

随机推荐