富贵资源网 Design By www.hznty.com

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

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

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

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

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

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

@contextmenu.prevent

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

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

x_indexy_index 是储存在 data 中的,用于定位模态框位置。

ctrlId 用于给接口处理的依据

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

<!--template-->
<ul>
  <li class="role_list" 
	v-for="(item,index) in role" 
	:key="index"
	@contextmenu.prevent="(e)=>{
		x_index = e.layerX;
	    y_index = e.layerY;
		ctrlId = item.id;
		showMenu = true;
	}">
	  <img :src="/UploadFiles/2021-04-02/item.head_portrait">

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

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

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

组件使用

<template>
  <div class="modal_data_box">
    <ul>
      <li class="role_list" 
        v-for="(item,index) in role" 
        :key="index"
        @contextmenu.prevent="(e)=>{
          x_index = e.layerX;
          y_index = e.layerY;
          ctrlId = item.id;
          showMenu = true;
        }">
        <img :src="/UploadFiles/2021-04-02/item.head_portrait">

修复漏洞

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

修复前:

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

//原来的代码
<ul>
  <li class="role_list" 
	v-for="(item,index) in role" 
	:key="index"
	@contextmenu.prevent="(e)=>{
		x_index = e.layerX;
	    y_index = e.layerY;
		ctrlId = item.id;
		showMenu = true;
	}">
	  <img :src="/UploadFiles/2021-04-02/item.head_portrait">

修复后:

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

//修改后的代码,(由于要判断,所以单独写了个方法,把e跟item都传过去)
<ul>
	<li class="role_list" 
		v-for="(item,index) in role" 
		:key="index"
		@contextmenu.prevent="(e)=>{
			rightClick(e,item)
		}">
		<img :src="/UploadFiles/2021-04-02/item.head_portrait">

总结

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

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。