vue中自定义右键菜单插件怎么用

发布时间:2022-04-11 10:38:42 作者:iii
来源:亿速云 阅读:399

今天小编给大家分享一下vue中自定义右键菜单插件怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

演示

vue中自定义右键菜单插件怎么用

用法

通过npm安装插件

npm i vue-context -S

在main.js中引入并注册

import Vue from 'vue';
import VueContext from 'vue-context';

new Vue({
  components: {
    VueContext
  },

在页面内使用

<div>
    <p @contextmenu.prevent="$refs.menu.open">
        Right click on me
    </p>    
</div>

在需要绑定的元素使用@contextmenu.prevent="$refs.menu.open"进行右键绑定,在绑定的同时还可以传入相关的参数 如下:

<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结构 项目中可以自己来设置样式

同时vue-context还具有有多个属性

<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里面的数据
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']
  };
}

以上就是“vue中自定义右键菜单插件怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. nagios监控haproxy插件--用shell自定义nagios插件
  2. 利用js实现自定义右键菜单插件的详细步骤

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:kubernetes怎么实现分布式限流

下一篇:JavaScript动态操作select下拉框的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》