vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式
更新時間：2024年04月26日 09:16:04 作者：程序猿小野
這篇文章主要介紹了vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
通常瀏覽器都會有自己的右鍵菜單
如下圖的谷歌瀏覽器網(wǎng)頁上的右鍵菜單：
介紹一下如何在vue的項目中實現(xiàn)自定義菜單
如下圖所示 ：
1. 安裝依賴包
npm install vue-contextmenujs
2. 在main.js中引用
import Contextmenu from 'vue-contextmenujs'; Vue.use(Contextmenu);
3. 在需要實現(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: '運行',
icon: 'iconfont icon-zhihang',
onClick: () => {
this.onRunCode();
}
},
{
label: '運行',
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是綁定的點擊事件，icon是圖標(biāo)
我這里用的阿里的iconfont，如果想使用ElementUI的圖標(biāo)，可以把icon的值設(shè)置為 icon el-icon-edit
- 第一個參數(shù)必填，固定為icon
- 第二個參數(shù)就是ElementUI圖標(biāo)庫里對應(yīng)的類名
icon: 'icon el-icon-edit',
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue?雙向綁定問題$emit無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Element Steps步驟條的使用方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
eslint是一個JavaScript的校驗插件，通常用來校驗語法或代碼的書寫風(fēng)格。這篇文章主要介紹了vue項目關(guān)閉eslint校驗,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue接通后端api以及部署到服務(wù)器操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了基于vue2實現(xiàn)左滑刪除功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue-router 控制路由權(quán)限的實現(xiàn)
這篇文章主要介紹了vue-router 控制路由權(quán)限的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue使用Print.js打印div方式(選中區(qū)域的html)
這篇文章主要介紹了Vue使用Print.js打印div方式(選中區(qū)域的html),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vue結(jié)合el-table實現(xiàn)表格小計總計需求(summary-method)
這篇文章主要介紹了vue結(jié)合el-table實現(xiàn)表格小計總計需求(summary-method),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue利用vue meta info設(shè)置每個頁面的title與meta信息
這篇文章主要給大家介紹了關(guān)于vue如何利用vue meta info設(shè)置每個頁面的title與meta信息的相關(guān)資料,文中將實現(xiàn)的方法介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-10-10
詳解vue開發(fā)中調(diào)用微信jssdk的問題
這篇文章主要介紹了vue開發(fā)中調(diào)用微信jssdk的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04