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


Posted in Javascript onNovember 06, 2019

最近用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="item.head_portrait" alt="">
	  <p>{{item.name}}</p>
	</li>
</ul>

需要的参数(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="item.head_portrait" alt="">
        <p>{{item.name}}</p>
      </li>
    </ul>
	<!--组件-->
	<right-menu :x="x_index"
	      :y="y_index" 
	      :showMenu="showMenu"
	      @close="closeMenu"
	      @open="openDetail"
	      @del="delAttr"
	      @update="updateArr">
	</right-menu>
  </div>
</template>
<script>
  // 导入组件
	import rightMenu from '../module/right_menu.vue';
	export default{
		name:"roleModal",
		components:{rightMenu},
		data(){
			return {
				x_index:0,
				y_index:0,
				ctrlId:'',
				showMenu:false,
				role:[],
			}
		},
		methods:{
		  //关闭回调 
		  closeMenu(state){
		    console.log('关闭')
		    this.showMenu = state;
		  },
		  //打开详情回调 			
		  openDetail(){
		    console.log('编辑')
		  },
		  //删除回调 			
		  delAttr(){
		    console.log('删除')
		  },
		  //编辑回调 			
		  updateArr(){
		    console.log('编辑')
		  },
		}
	}
</script>

修复漏洞

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="item.head_portrait" alt="">
	  <p>{{item.name}}</p>
	</li>
</ul>

修复后:

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

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

//对应的rightClick方法
rightClick(e,item){
	// 屏幕可见宽
	let clientWidth = document.body.clientWidth;
	// 菜单宽
	let menuWidth = 150;
	// 点击右键时会返回对应的clientX,用这个值与(clientWidth+菜单宽度)对比,如果大于的话,就把菜单左偏移一个菜单宽
	let clickClientX = 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 自定义右键样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
javascript动态加载三
Aug 22 Javascript
javascript使用call调用微信API
Dec 15 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
JS实现的几个常用算法
Nov 12 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 #Javascript
vue 解决computed修改data数据的问题
Nov 06 #Javascript
微信小程序页面渲染实现方法
Nov 06 #Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 #Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 #Javascript
对vuex中getters计算过滤操作详解
Nov 06 #Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 #Javascript
You might like
PHP4实际应用经验篇(7)
2006/10/09 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Python 切分数组实例解析
2019/11/07 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
params有什么用
2016/03/01 面试题
怎么写自荐书范文
2014/02/12 职场文书
幼儿教师培训感言
2014/03/08 职场文书
美国留学经济担保书
2014/05/20 职场文书
抗洪救灾标语
2014/10/08 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS