vue实现右键弹出菜单_vue.js

data() {
            return {
           
                visible: false,//菜单隐藏控制
                td_index: 0,//当前点击的单元格列下标
                tr_index: 0,//当前点击的单元格行下标
                top: 0,
                left: 0,
                menuList: ["插入图片", "插入视频", "插入链接", "插入附件", "更换图片", "更换视频", "更换链接", "更换附件", "清空单元格"],
            
            }
        },
        watch: {
            //监听visible的变化，来触发关闭右键菜单，调用关闭菜单的方法
            visible(value) {
                if (value) {
                    document.body.addEventListener('click', this.closeMenu)
                } else {
                    document.body.removeEventListener('click', this.closeMenu)
                }
            }
        },
         //鼠标右键事件--打开菜单
            openMenu(e, item, td_index, tr_index) {
                if (item.ifR || this.action == 'detail' || this.action == 'version' || item.cU == 1) return;
                if (item.ifR == 0 && item.cT == 22860 && item.cV.cD) this.menuList = ["清空单元格"];
                if (item.ifR == 0 && item.cT == 22861 && item.cV.cD) this.menuList = ["更换图片", "清空单元格"];
                if (item.ifR == 0 && item.cT == 22862 && item.cV.cD) this.menuList = ["更换视频", "清空单元格"];
                if (item.ifR == 0 && item.cT == 22863 && item.cV.cD) this.menuList = ["更换链接", "清空单元格"];
                if (item.ifR == 0 && item.cT == 22864 && item.cV.cD) this.menuList = ["更换附件", "清空单元格"];
                if (item.ifR == 0 && (item.cT == 22860 || item.cT == 22861 || item.cT == 22862 || item.cT == 22863 || item.cT == 22864) && item.cV.cD == '') this.menuList = ["插入图片", "插入视频", "插入链接", "插入附件", "清空单元格"];
                //this.rightClickItem = item;
                let x = e.clientX;
                let y = e.clientY;
                this.top = y;
                this.left = x;
                this.td_index = td_index;
                this.tr_index = tr_index;
                this.visible = true;
            },
            //鼠标右键事件--关闭菜单
            closeMenu() {
                this.visible = false;
            },