vue中自定义右键菜单插件怎么用-亚博电竞手机版

恰卡编辑 开发技术 2022年04月11日 21:21
1

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

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

演示

用法

通过npm安装插件

npmivue-context-s

在main.js中引入并注册

importvuefrom'vue';importvuecontextfrom'vue-context';newvue({components:{vuecontext},

在页面内使用

rightclickonme

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

菜单栏部分

菜单栏主要是ul>li结构 项目中可以自己来设置样式

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

  • closeonclick 默认值为true 设置成false时鼠标点击菜单栏将不会自动关闭

  • closeonscroll 默认值为true 设置成false时鼠标点击菜单栏将不会自动关闭

  • option1
  • option2
    • //data里面的数据data(){return{//whensettotrue,thecontextmenuwillclosewhenclickedoncloseonclick:true,//whensettotrue,thecontextmenuwillclosewhenthewindowisscrolledcloseonscroll:true,//whenfalse,thecontextmenuisshownviav-showandwillalwaysbepresentinthedomlazy:false,//the`role`attributeonthemenu.recommendedtostayas`menu`role:'menu',//theroothtmltagofthemenu.recommendedtostayas`ul`tag:'ul',//thisishowthecomponentisabletofindeachmenuitem.usefulifyouusenon-recommendedmarkupitemselector:['.custom-item-class']};}

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

    vue

    内容来源于互联网和用户投稿,文章中一旦含有亚博电竞手机版的联系方式务必识别真假，本站仅做信息展示不承担任何相关责任，如有侵权或涉及法律问题请联系亚博电竞手机版删除

    最新文章

    亚博电竞手机版-亚博vip888
    ×
    ×

    手机扫一扫关注亚博电竞手机版

    ×
    ×
    网站地图