从品牌网站建设到网络营销策划,从策略到执行的一站式服务
最近用python写了个小说程序的api,想着用 vue
做个系统管理数据,脑子里出现的是这个画面:
但是这种样式的管理后台已经做了太多了,已经审美疲劳,后面又想了一种类操作系统的UI界面:
主要是靠 双击
和 右键
来操作,可操作多个模态框,跟操作 windows
类似,接下来在里面拆出一个功能块来写一篇文章,就是 自定义系统默认的右键
。
自定义右键操作有五个步骤: 阻止
默认右键。 获取当前右键点击时的 x
/ y
坐标,及 id
。 自定义右键菜单样式及内容,定位在指定的位置后显示。 返回对应点击目录的事件如: 查看
、 删除
、 编辑
。 在任何地方点击左键时 隐藏右键菜单
。 关键方法:
@contextmenu.prevent
这个是vue内置的,点击右键(阻止默认右键的默认行为)的一个回调方法,他返回了一大串东西这里我用到的是这两个(用于定位显示菜单的x,y位置)
x_index
, y_index
是储存在 data
中的,用于定位模态框位置。
ctrlId
用于给接口处理的依据
showMenu
用于判断是否显示右键菜单
{{item.name}}
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图