vue 自定义右键样式

前言

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

image

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

image

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

自定义右键操作有五个步骤：

1. 阻止默认右键。
2. 获取当前右键点击时的x/y坐标，及id。
3. 自定义右键菜单样式及内容，定位在指定的位置后显示。
4. 返回对应点击目录的事件如:查看、删除、编辑。
5. 在任何地方点击左键时隐藏右键菜单。

关键方法：

@contextmenu.prevent

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

但是这里会出现一个问题：

操作1：

    

        
        
{{item.name}}
    



methods:{
    rightClick(e){
        
        console.log(e)
    }
}

操作2：

    

        
        
{{item.name}}
    



methods:{
    rightClick(id){
        
        console.log(id)
    }
}

解决方法：

x_index，y_index 是储存在data中的，用于定位模态框位置。
ctrlId 用于给接口处理的依据
showMenu 用于判断是否显示右键菜单

    

        
        
{{item.name}}
    

需要的参数(x,y,id)都具备了，因为右键操作很多地方都用到了，所以封装成了一个组件

right_menu.vue 组件代码

参数名	注释
x	x坐标
y	y坐标
showMenu	显示状态

组件使用

其余文章：

css图片以最长边显示

flask多图片储存优化

flask 实现token机制