vue中自定義右鍵菜單插件
更新時(shí)間：2022年04月10日 08:51:01 作者：一木不可樂
這篇文章主要為大家詳細(xì)介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前言：
作為一個(gè)剛剛?cè)腴T前端的搬磚工作者，寫博客只是為了能夠記錄自己因?yàn)闃I(yè)務(wù)使用過的一些插件，為了后續(xù)更好的使用和改造
本文分享了vue中自定義右鍵菜單插件的具體代碼，供大家參考，具體內(nèi)容如下
演示
用法
通過npm安裝插件
npm i vue-context -S
在main.js中引入并注冊
import Vue from 'vue';
import VueContext from 'vue-context';
new Vue({
? components: {
? ? VueContext
? },在頁面內(nèi)使用
<div> ? ? <p @contextmenu.prevent="$refs.menu.open"> ? ? ? ? Right click on me ? ? </p> ? ? </div>
在需要綁定的元素使用@contextmenu.prevent="$refs.menu.open"進(jìn)行右鍵綁定，在綁定的同時(shí)還可以傳入相關(guān)的參數(shù) 如下：
<span @contextmenu.prevent="$refs.menu.open($event, {level: 'L0', or_gid:1, parentId:3})">菜單欄部分
<vue-context ref="menu"> ? ? ? <li ?@click.prevent=“”></li> </vue-context>
菜單欄主要是ul>li結(jié)構(gòu) 項(xiàng)目中可以自己來設(shè)置樣式
同時(shí)vue-context還具有有多個(gè)屬性
- closeOnClick 默認(rèn)值為true 設(shè)置成false時(shí)鼠標(biāo)點(diǎn)擊菜單欄將不會(huì)自動(dòng)關(guān)閉
- closeOnScroll 默認(rèn)值為true 設(shè)置成false時(shí)鼠標(biāo)點(diǎn)擊菜單欄將不會(huì)自動(dòng)關(guān)閉
<vue-context ref="menu"?
? ?:close-on-click="closeOnClick"?
? ?:close-on-scroll="closeOnScroll"
? ?:lazy="lazy"
? ?:role="role"
? ?:tag="tag"
? ?:item-selector="itemSelector"
>
<li>
?? ?<a class="custom-item-class">Option 1</a>
</li>
<li>
?? ?<a class="custom-item-class">Option 2</a>
</li>
</vue-context>
// data里面的數(shù)據(jù)
data () {
? return {
? ? ? // when set to true, the context ?menu will close when clicked on
? ? ? closeOnClick: true,
? ? ? // when set to true, the context ?menu will close when the window is scrolled
? ? ? closeOnScroll: true,
? ? ? // When false, the context menu is shown via v-show and will always be present in the DOM
? ? ? lazy: false,
? ? ? // The `role` attribute on the menu. Recommended to stay as `menu`
? ? ? role: 'menu',
? ? ? // The root html tag of the menu. Recommended to stay as `ul`
? ? ? tag: 'ul',
? ? ? // This is how the component is able to find each menu item. Useful if you use non-recommended markup
? ? ? itemSelector: ['.custom-item-class']
? };
}具體的相關(guān)內(nèi)容還有很多，因?yàn)轫?xiàng)目趕的比較急，達(dá)到了業(yè)務(wù)需求就沒有繼續(xù)深究，在此貼一下官方鏈接
官方 鏈接
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue實(shí)現(xiàn)全局的toast組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了Vue中的filter與directive的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要介紹了vue異步加載dom元素之后無法獲得的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本文主要介紹在Vue中使用debouce防抖函數(shù)，設(shè)置一個(gè)門檻值，表示兩次?Ajax?通信的最小間隔時(shí)間。如果在間隔時(shí)間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)?Ajax?通信，并且重新開始計(jì)時(shí)。如果過了指定時(shí)間，沒有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去，這便是debouce防抖函數(shù)2021-12-12
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理，感興趣的同學(xué)可以參考一下2023-04-04
vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題
這篇文章主要介紹了vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue實(shí)現(xiàn)下拉框篩選表格數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉框篩選表格數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了代碼詳解Vuejs響應(yīng)式原理的基礎(chǔ)知識(shí)，有興趣的朋友們參考學(xué)習(xí)下吧。2017-12-12