vue鼠标右键自定义菜单_vue-右键菜单功能
[TOC]
>[success] # :-: vue-右鍵菜單功能
[在線demo點擊我](https://xunleif2e.github.io/vue-context-menu/demo/dist/#/)
項目中有時候會有右鍵菜單的需求，所以在github找了一個[右鍵菜單](https://github.com/xunleif2e/vue-context-menu)的插件，使用方法如下：
>[success] ## 安裝
~~~
npm install @xunlei/vue-context-menu
~~~
>[success] ## 注冊組件
1.全局注冊，在main.js引入如下以下文件
~~~
import VueContextMenu from '@xunlei/vue-context-menu'
Vue.use(VueContextMenu)
~~~
2.局部注冊，在使用到的.vue文件引入
~~~
import { component as VueContextMenu } from '@xunlei/vue-context-menu'
正確寫法：
components: { VueContextMenu }
錯誤寫法(文檔中寫法)：
components: { 'vue-context-menu': VueContextMenu }
~~~
注意：這里要這么寫不能按照他文檔中的寫法如果按照文檔中寫法會報錯： 未知的自定義元素： - 您是否正確注冊了組件？ 對于遞歸組件，請確保提供“名稱”選項。
>[success] ## 使用案例
~~~
// html部分
ref="contextMenu"
:target="contextMenuTarget"
:show="contextMenuVisible"
@update:show="(show) => contextMenuVisible = show">
復制
引用
刪除
// 這里的@update:show="(show) => contextMenuVisible = show" 也可以去掉然后把上面的自定義屬性改成
// :show.sync="contextMenuVisible"也是好用的
// js部分
import { component as VueContextMenu } from '@xunlei/vue-context-menu'
export default {
components: { VueContextMenu },
data(){
return{
contextMenuTarget:document.body, // 可右鍵區域，這里也可以綁定$refs
contextMenuVisible:false // 控制菜單顯示隱藏
}
},
methods: {
copyMsg(){
alert('點擊復制')
},
quoteMsg(){
alert('點擊引用')
},
deleteMsg(){
alert('點擊刪除')
}
}
}
// css部分
/deep/ td.table_td_h {
padding: 17px 0;
}
/deep/ .right-menu {
display: none;
position: fixed;
background: #fff;
border: 1px solid #bababa;
border-radius: 3px;
z-index: 999;
box-shadow: 2px 2px 3px 0px rgba(51, 42, 40, 0.7);
border-radius: 1px;
p{
margin: 0;
display: block;
width: 200px;
height: 35px;
line-height: 35px;
text-align: left;
padding: 0 24px 0 32px;
color: #000000;
cursor: pointer;
font-size: 15px;
border-bottom: 1px solid #e8eaed;
&:hover{
background: #e8eaed;
}
}
.menu-disable{
cursor: no-drop;
color: #80868b;
}
}
~~~
~~~
這里'為什么要寫樣式'呢，因為npm后不知道是什么原因樣式沒有引入進來，就只能這樣使用時候把樣式寫到
用到'右鍵菜單'的.vue文件中，或者弄一個全局的css文件寫到里面也可以。
~~~
>[danger] ## 需要注意
實際開發中element ui的tree插件的右鍵功能跟這個右鍵功能有沖突，在點擊右鍵時候element ui的tree插件是好用的，右鍵菜單不好用，如圖：
解決辦法：
~~~
treeNodeRightClick(nodeData){ // 右鍵左側樹
// 右鍵樹的事件的時候調用右鍵菜單的方法把event對象傳入進去就好用了
// this.$refs.contextMenu是右鍵菜單的組件
this.$refs.contextMenu.contextMenuHandler(event)
}
~~~
總結
以上是生活随笔為你收集整理的vue鼠标右键自定义菜单_vue-右键菜单功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Centos7安装MySQL客户端工具
- 下一篇： html5倒计时秒杀怎么做,vue 设