时间:2021-05-26
最近用python写了个小说程序的api,想着用 vue 做个系统管理数据,脑子里出现的是这个画面:
但是这种样式的管理后台已经做了太多了,已经审美疲劳,后面又想了一种类操作系统的UI界面:
主要是靠 双击 和 右键 来操作,可操作多个模态框,跟操作 windows 类似,接下来在里面拆出一个功能块来写一篇文章,就是 自定义系统默认的右键 。
自定义右键操作有五个步骤: 阻止 默认右键。 获取当前右键点击时的 x / y 坐标,及 id 。 自定义右键菜单样式及内容,定位在指定的位置后显示。 返回对应点击目录的事件如: 查看 、 删除 、 编辑 。 在任何地方点击左键时 隐藏右键菜单 。 关键方法:
@contextmenu.prevent
这个是vue内置的,点击右键(阻止默认右键的默认行为)的一个回调方法,他返回了一大串东西这里我用到的是这两个(用于定位显示菜单的x,y位置)
x_index , y_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 自定义右键样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示:实例方法//自定义指令Vue.directive('drag',function(){varoDi
本文实例为大家分享了Android自定义Dialog遮罩效果的具体代码,供大家参考,具体内容如下图例:代码1、自定义dialog:引入样式和代码指定样式pack
本文实例讲述了JS实现的自定义右键菜单。分享给大家供大家参考。具体如下:示例1:运行效果截图:具体代码如下:JS实现自定义右键菜单#container{text
本文实例讲述了Vue自定义指令功能。分享给大家供大家参考,具体如下:自定义指令自定义指令{{num}}加一解绑functionunbind(){//vue提供的
JS代码实现自定义热键实现功能:1.自定义上下左右键2.使用自定义热键或者使用键盘上下左右键移动图片效果图:步骤1:HTML代码:使用自定义按键实现图片移动ta