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)頁(yè)上的右鍵菜單：
介紹一下如何在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)庫(kù)里對(duì)應(yīng)的類名
icon: 'icon el-icon-edit',
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue?雙向綁定問(wèn)題$emit無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Element Steps步驟條的使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue項(xiàng)目關(guān)閉eslint校驗(yàn)
eslint是一個(gè)JavaScript的校驗(yàn)插件，通常用來(lái)校驗(yàn)語(yǔ)法或代碼的書寫風(fēng)格。這篇文章主要介紹了vue項(xiàng)目關(guān)閉eslint校驗(yàn),需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue接通后端api以及部署到服務(wù)器操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了基于vue2實(shí)現(xiàn)左滑刪除功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue-router 控制路由權(quán)限的實(shí)現(xiàn)
這篇文章主要介紹了vue-router 控制路由權(quán)限的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue使用Print.js打印div方式(選中區(qū)域的html)
這篇文章主要介紹了Vue使用Print.js打印div方式(選中區(qū)域的html),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method)
這篇文章主要介紹了vue結(jié)合el-table實(shí)現(xiàn)表格小計(jì)總計(jì)需求(summary-method),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue利用vue meta info設(shè)置每個(gè)頁(yè)面的title與meta信息
這篇文章主要給大家介紹了關(guān)于vue如何利用vue meta info設(shè)置每個(gè)頁(yè)面的title與meta信息的相關(guān)資料,文中將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
詳解vue開(kāi)發(fā)中調(diào)用微信jssdk的問(wèn)題
這篇文章主要介紹了vue開(kāi)發(fā)中調(diào)用微信jssdk的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04