vue中自定義右鍵菜單插件

更新時間：2022年04月10日 08:51:01 作者：一木不可樂

這篇文章主要為大家詳細(xì)介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言：

作為一個剛剛?cè)腴T前端的搬磚工作者，寫博客只是為了能夠記錄自己因為業(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)行右鍵綁定，在綁定的同時還可以傳入相關(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) 項目中可以自己來設(shè)置樣式

同時vue-context還具有有多個屬性

closeOnClick 默認(rèn)值為true 設(shè)置成false時鼠標(biāo)點擊菜單欄將不會自動關(guān)閉
closeOnScroll 默認(rèn)值為true 設(shè)置成false時鼠標(biāo)點擊菜單欄將不會自動關(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)容還有很多，因為項目趕的比較急，達(dá)到了業(yè)務(wù)需求就沒有繼續(xù)深究，在此貼一下官方鏈接

官方鏈接

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: