vue2項(xiàng)目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式
更新時(shí)間：2024年04月26日 09:16:04 作者：程序猿小野
這篇文章主要介紹了vue2項(xiàng)目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
通常瀏覽器都會(huì)有自己的右鍵菜單
如下圖的谷歌瀏覽器網(wǎng)頁上的右鍵菜單：
介紹一下如何在vue的項(xiàng)目中實(shí)現(xiàn)自定義菜單
如下圖所示 ：
1. 安裝依賴包
npm install vue-contextmenujs
2. 在main.js中引用
import Contextmenu from 'vue-contextmenujs'; Vue.use(Contextmenu);
3. 在需要實(shí)現(xiàn)自定義右鍵的元素上
加上 @contextmenu.prevent="onContextmenu"
<div class="CodeMirror-Contain" @contextmenu.prevent="onContextmenu">
<textarea ref="codeMirror"></textarea>
</div>4. methods中添加方法
// 鼠標(biāo)右鍵事件
onContextmenu(event) {
this.$contextmenu({
items: this.contextMenuData,
event, // 鼠標(biāo)事件信息
customClass: 'custom-class', // 自定義菜單 class
zIndex: 3, // 菜單樣式 z-index
minWidth: 230 // 主菜單最小寬度
});
return false;
},5. contextMenuData的數(shù)據(jù)
如下：
this.contextMenuData = [
{
label: '運(yùn)行',
icon: 'iconfont icon-zhihang',
onClick: () => {
this.onRunCode();
}
},
{
label: '運(yùn)行',
icon: 'iconfont icon-sql_exec_new',
onClick: () => {
this.onRunCodeNewTab();
}
},
{
label: '收藏',
icon: 'iconfont icon-baocun1',
divided: true,
onClick: () => {
this.onCommitOrder();
}
},
{
label: '格式化',
icon: 'iconfont icon-geshihua1',
onClick: () => {
this.onFormatSQL();
}
}
];contextMenuData中，label是文字，onClick是綁定的點(diǎn)擊事件，icon是圖標(biāo)
我這里用的阿里的iconfont，如果想使用ElementUI的圖標(biāo)，可以把icon的值設(shè)置為 icon el-icon-edit
- 第一個(gè)參數(shù)必填，固定為icon
- 第二個(gè)參數(shù)就是ElementUI圖標(biāo)庫里對(duì)應(yīng)的類名
icon: 'icon el-icon-edit',
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中調(diào)接口的方式詳解this.$api、直接調(diào)用、axios
這篇文章主要介紹了vue中調(diào)接口的方式：this.$api、直接調(diào)用、axios,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-11-11
vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
關(guān)于VUE點(diǎn)擊父組件按鈕跳轉(zhuǎn)到子組件的問題及解決方案
本文主要介紹了在Vue框架中,如何通過父組件的點(diǎn)擊事件打開子組件中的彈窗并展示表格內(nèi)容,主要步驟包括在父組件中定義數(shù)據(jù)屬性,創(chuàng)建并定義子組件的彈窗和表格內(nèi)容,通過props屬性和自定義事件實(shí)現(xiàn)父子組件間的數(shù)據(jù)傳遞和方法調(diào)用2024-10-10
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細(xì)介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
最近開發(fā)了一個(gè)功能,頁面首頁會(huì)加載大量的圖片,初次進(jìn)入頁面時(shí),會(huì)導(dǎo)致頁面性能下降,于是乎,我改進(jìn)了這個(gè)功能,可以讓所有圖片自動(dòng)懶加載,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue中的公共方法調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問題)
項(xiàng)目全線使用vue3的時(shí)候,自然使用的是配套更加契合的vite打包工具,于是自然而然會(huì)用到很多新的語法,本文給大家介紹了vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問題),需要的朋友可以參考下2024-04-04
iview實(shí)現(xiàn)select tree樹形下拉框的示例代碼
這篇文章主要介紹了iview實(shí)現(xiàn)select tree樹形下拉框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue項(xiàng)目之前端CryptoJS加密、解密代碼示例
在Vue項(xiàng)目中集成CryptoJS進(jìn)行數(shù)據(jù)加密,首先需要通過npm安裝CryptoJS安裝包,然后在項(xiàng)目文件中引入CryptoJS,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11