vue實現(xiàn)右鍵彈出菜單
更新時間：2022年07月15日 09:25:15 作者：早起的小笨雞
這篇文章主要為大家詳細介紹了vue實現(xiàn)右鍵彈出菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在最近工作中，有一個需求，需要做一個表格，并且對該表格右鍵彈出菜單支持增刪改，這里做下總結(jié)，功能截圖如下：
首先定義菜單結(jié)構(gòu)
<!-- 菜單 -->
<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>js代碼
data() {
? ? ? ? ? ? return {
? ? ? ? ? ?
? ? ? ? ? ? ? ? visible: false,//菜單隱藏控制
? ? ? ? ? ? ? ? td_index: 0,//當(dāng)前點擊的單元格列下標(biāo)
? ? ? ? ? ? ? ? tr_index: 0,//當(dāng)前點擊的單元格行下標(biāo)
? ? ? ? ? ? ? ? top: 0,
? ? ? ? ? ? ? ? left: 0,
? ? ? ? ? ? ? ? menuList: ["插入圖片", "插入視頻", "插入鏈接", "插入附件", "更換圖片", "更換視頻", "更換鏈接", "更換附件", "清空單元格"],
? ? ? ? ? ??
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? watch: {
? ? ? ? ? ? //監(jiān)聽visible的變化，來觸發(fā)關(guān)閉右鍵菜單，調(diào)用關(guān)閉菜單的方法
? ? ? ? ? ? visible(value) {
? ? ? ? ? ? ? ? if (value) {
? ? ? ? ? ? ? ? ? ? document.body.addEventListener('click', this.closeMenu)
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? document.body.removeEventListener('click', this.closeMenu)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? ?//鼠標(biāo)右鍵事件--打開菜單
? ? ? ? ? ? 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;
? ? ? ? ? ? },
? ? ? ? ? ? //鼠標(biāo)右鍵事件--關(guān)閉菜單
? ? ? ? ? ? closeMenu() {
? ? ? ? ? ? ? ? this.visible = false;
? ? ? ? ? ? },以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決VUE的對話框el-dialog點擊外部消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了解決vue cli使用typescript后打包巨慢的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
前端vue-cli項目中使用img圖片和background背景圖的幾種方法
這篇文章主要介紹了前端vue-cli項目中使用img圖片和background背景圖的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue中h5端打開app(判斷是安卓還是蘋果),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了細說 Vue 組件的服務(wù)器端渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何使用echarts實現(xiàn)繪制折線圖,文中有詳細的示例代碼供大家參考,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
下面小編就為大家分享一篇Vue-路由導(dǎo)航菜單欄的高亮設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue系列：通過vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列：通過vue-router如何傳遞參數(shù)示例，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue中常見的幾種傳參方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-05-05