快捷導(dǎo)航

Vue+element-ui添加自定義右鍵菜單的方法示例

更新時(shí)間：2020年12月08日 10:07:07 作者：一鍵寫代碼

這篇文章主要給大家介紹了關(guān)于Vue+element-ui添加自定義右鍵菜單的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1、在所編輯的頁面，需要添加右鍵菜單的元素，綁定contextmenu事件

<template>
<el-button size="medium"  @contextmenu.prevent.native="openMenu($event)">
......
</template>

2、在頁面編寫右鍵菜單內(nèi)容

<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
   <li>上移一層</li>
   <li>下移一層</li>
 </ul>

3、在data()中定義需要的變量屬性

data() { 
	return {
			visible: false,
			top: 0,
			left: 0
	}
}

4、觀察visible的變化，來觸發(fā)關(guān)閉右鍵菜單，調(diào)用關(guān)閉菜單的方法

 watch: {
  visible(value) {
   if (value) {
    document.body.addEventListener('click', this.closeMenu)
   } else {
    document.body.removeEventListener('click', this.closeMenu)
   }
  }
 },

5、在method中定義打開右鍵菜單和關(guān)閉右鍵菜單的兩個(gè)方法

  openMenu(e) {
   const menuMinWidth = 105
   const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
   const offsetWidth = this.$el.offsetWidth // container width
   const maxLeft = offsetWidth - menuMinWidth // left boundary
   const left = e.clientX - offsetLeft // 15: margin right

   if (left > maxLeft) {
    this.left = maxLeft
   } else {
    this.left = left
   }

   this.top = e.clientY - 60 // fix 位置bug
   this.visible = true
  },
  closeMenu() {
   this.visible = false
  }

6、在style中寫右鍵菜單的樣式

 .contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
   margin: 0;
   padding: 7px 16px;
   cursor: pointer;
   &:hover {
    background: #eee;
   }
  }
 }

注意：.native修飾符對(duì)vue組件元素監(jiān)聽原生事件有效，對(duì)原生的html元素使用，反而沒有效果。

到此這篇關(guān)于Vue+element-ui添加自定義右鍵菜單的文章就介紹到這了,更多相關(guān)Vue+element-ui添加自定義右鍵菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中如何使用mock你知道嗎
這篇文章主要為大家介紹了vue項(xiàng)目如何使用mock，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
vue 保留兩位小數(shù) 不能直接用toFixed(2) 的解決
這篇文章主要介紹了vue 保留兩位小數(shù) 不能直接用toFixed(2) 的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue與electron實(shí)現(xiàn)進(jìn)程間的通信詳情
這篇文章主要介紹了vue與electron實(shí)現(xiàn)進(jìn)程間的通信詳情，本文主要介紹electron渲染進(jìn)程和主進(jìn)程間的通信，以及在渲染進(jìn)程和主進(jìn)程中常用的配置項(xiàng)，需要的朋友可以參考一下
2022-09-09
elementUI Pagination 分頁指定最大頁的問題及解決方法(page-count)
項(xiàng)目中遇到數(shù)據(jù)量大,查詢的字段多,但用戶主要使用的是最近的一些數(shù)據(jù),1萬條以后的數(shù)據(jù)一般不使用,這篇文章主要介紹了elementUI Pagination 分頁指定最大頁的問題及解決方法(page-count),需要的朋友可以參考下
2024-08-08
vue.js父組件使用外部對(duì)象的方法示例
在我們?nèi)粘ｉ_發(fā)中經(jīng)常因?yàn)樗季S定式，我們會(huì)犯一些奇怪的錯(cuò)誤，有時(shí)候看似簡(jiǎn)單的問題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對(duì)象的方法，這個(gè)看似簡(jiǎn)單卻繞了一些彎路的問題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來看看吧。
2017-04-04
vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue3簡(jiǎn)易實(shí)現(xiàn)proxy代理實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Python實(shí)現(xiàn)學(xué)生成績(jī)管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的相關(guān)資料,需要的朋友可以參考下
2023-12-12
Vue2.0如何發(fā)布項(xiàng)目實(shí)戰(zhàn)
本篇文章主要介紹了Vue2.0如何發(fā)布項(xiàng)目實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07