vue實現右鍵彈出菜單

<!-- 菜單 -->
<div class="menu-list" :style="{position:'fixed',top:top+'px',left:left+'px'}" v-if="visible">
    <div class="menu" v-for="(item,index) in menuList">
         <div v-if="item=='插入圖片'||item=='更換圖片'">
             <el-upload class="upload-demo"
                         action=""
                         :accept="$pubTool.UPLOADIMGFORMAT"
                         :auto-upload="false"
                         :show-file-list="false"
                         :limit="1"
                         :on-exceed="(files) => { selectedFileMore(files, 'img', 'script_filePath', 0,0, 1, 'NONE', false); addImg(); }"
                         :on-change="(file) => { selectedFile(file, 'img', 'script_filePath', 0,0, 1, 'NONE', false); addImg(); }">
                        <div>{{item}}</div>
                    </el-upload>
                </div>
                <div v-if="item=='插入視頻'||item=='更換視頻'">
                    <el-upload class="upload-demo"
                         action=""
                         :accept="$pubTool.UPLOADVIDEOFORMAT"
                         :auto-upload="false"
                         :show-file-list="false"
                         :limit="1"
                         :on-exceed="(files) => { selectedFileMore(files, 'video', 'script_filePath', 1,1, 1, 'script_fileCover', true); addVideo(); }"
                         :on-change="(file) => { selectedFile(file, 'video', 'script_filePath', 1, 1,1, 'script_fileCover', true); addVideo(); }">
                        <div>{{item}}</div>
                    </el-upload>
                </div>
                <div v-if="item=='插入附件'||item=='更換附件'">
                    <el-upload class="upload-demo"
                          action=""
                          :accept="$pubTool.UPLOADSCRIPTFORMAT"
                          :auto-upload="false"
                          :show-file-list="false"
                          :limit="1"
                           multiple
                           :on-exceed="(files) => { selectedFileMore(files, 'annex', 'script_filePath', 4,1, 1, 'script_fileCover', true); addAnnex(); }"
                           :on-change="(file) => { selectedFile(file, 'annex', 'script_filePath', 4, 1,1, 'script_fileCover', true); addAnnex(); }">
                        <div>{{item}}</div>
                    </el-upload>
                </div>
                <div v-if="item=='插入鏈接'||item=='更換鏈接'" @click="operHref.ifShow = true">
                    {{item}}
                </div>
                <div v-if="item=='清空單元格'" @click="clearCell">
                    {{item}}
              </div>
       </div>
</div>

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;
            },