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

 更新时间:2019年11月06日 14:18:56   作者:水君子  
这篇文章主要介绍了vue 自定义右键样式的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

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

 

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

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

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

@contextmenu.prevent

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

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同学发现了一个漏洞,就是当鼠标在屏幕右边点击时,菜单会被遮挡住,这边做了一些调整。

修复前:

//原来的代码
<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>

修复后:

//修改后的代码,(由于要判断,所以单独写了个方法,把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 自定义右键样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • Vue3中引入使用vant组件的教程详解

    Vue3中引入使用vant组件的教程详解

    Vant是一个强大的移动端组件库,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要为大家介绍vue3中的vant组件引入使用的方法,希望对大家有所帮助
    2023-10-10
  • DataV 全屏容器组件源码解析

    DataV 全屏容器组件源码解析

    这篇文章主要为大家介绍了DataV 全屏容器组件源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    这篇文章主要介绍了vue安装和使用教程,用了很久css预编译器,但是一直不太清楚到底用的sass还是scss,直到有天被问住了有点尴尬,感兴趣的朋友一起看看吧
    2018-10-10
  • 基于Vue3+ts封装一个简单版的Message组件

    基于Vue3+ts封装一个简单版的Message组件

    近日项目中需要使用信息提示框的功能,ui组件库使用的是字节的arco-design-vue,看了一下,现有的Message不满足要是需求,直接使用message组件的话,改样式太麻烦,所以本文就本就介绍了基于Vue3+ts封装一个简单版的Message组件,需要的朋友可以参考下
    2023-09-09
  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    这篇文章主要介绍了Vue中Table组件行内右键菜单实现方法,该项目是基于 vue + AntDesign的,具体实例代码给大家介绍的非常详细 ,需要的朋友可以参考下
    2019-11-11
  • Vue3如何处理异步任务轮询

    Vue3如何处理异步任务轮询

    在许多应用程序中,我们经常需要执行定期的异步任务轮询,本文就介绍了Vue3如何处理异步任务轮询,感兴趣的可以了解一下
    2023-05-05
  • vue中注册自定义的全局js方法

    vue中注册自定义的全局js方法

    这篇文章主要介绍了vue中注册自定义的全局js方法,文中给大家补充介绍了vue自定义函数挂到全局的方法,需要的朋友可以参考下
    2019-11-11
  • Vue3使用路由VueRouter4的简单示例

    Vue3使用路由VueRouter4的简单示例

    在vue.js项目中使用vue-router,可以使用路由进行界面或路径跳转,下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • 深入探讨Vue计算属性与监听器的区别和用途

    深入探讨Vue计算属性与监听器的区别和用途

    在Vue的开发中,计算属性(Computed Properties)和监听器(Watchers)是两种非常重要的概念,它们都用于响应式地处理数据变化,本文将带你深入了解计算属性和监听器的区别,以及在何时使用它们,感兴趣的朋友可以参考下
    2023-09-09
  • Vue自定义render统一项目组弹框功能

    Vue自定义render统一项目组弹框功能

    这篇文章主要介绍了Vue自定义render统一项目组弹框功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06

最新评论