大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
最近用python写了个小说程序的api,想着用 vue
做个系统管理数据,脑子里出现的是这个画面:
但是这种样式的管理后台已经做了太多了,已经审美疲劳,后面又想了一种类操作系统的UI界面:
主要是靠 双击
和 右键
来操作,可操作多个模态框,跟操作 windows
类似,接下来在里面拆出一个功能块来写一篇文章,就是 自定义系统默认的右键
。
自定义右键操作有五个步骤: 阻止
默认右键。 获取当前右键点击时的 x
/ y
坐标,及 id
。 自定义右键菜单样式及内容,定位在指定的位置后显示。 返回对应点击目录的事件如: 查看
、 删除
、 编辑
。 在任何地方点击左键时 隐藏右键菜单
。 关键方法:
@contextmenu.prevent
这个是vue内置的,点击右键(阻止默认右键的默认行为)的一个回调方法,他返回了一大串东西这里我用到的是这两个(用于定位显示菜单的x,y位置)
x_index
, y_index
是储存在 data
中的,用于定位模态框位置。
ctrlId
用于给接口处理的依据
showMenu
用于判断是否显示右键菜单
{{item.name}}