今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu)

  安装

  

1  npm install rightmenu --save-dev

  开始

//main.js
import vue from "vue";
import rightMenu from "rightMenu";
vue.use(rightMenu);

  例子

<template><div><button v-rightMenu = "menudata">{{text}}</button></div>
</template>
<script>export default {name:"demo",data(){return {menudata:{// 菜单box的样式   Menu box styleboxStyle:"width:150px;background:#f55;",// 菜单选项的样式 Style of menu optionsoptionStyle:"color:#fff;line-height:30px;font-size:15px;",menus:[{/*** content 菜单显示的文字 <支持html> * callback:菜单点击要触发函数  需要在methods定义 * style : 本项菜单的单独样式 可以覆盖掉optionStyle  * icon : icon图片地址* iconStyle: icon 图片的样式(例如大小等 直接作用于图片)* iconPosition : 支持left / right (其余全部按照left处理);* content The text displayed on the menu(can use html)* callback: Menu clicks to trigger functions need to be defined in methods* style :  The single style of this menu can override option Style* icon : your icon's url* iconStyle : you icon's style ,is image's style* iconPosition :you can use left or right ;The rest are all processed according to left*//*** 字段(field)           类型(type)                 是否可以为空(is can null)    默认值* content            [ html | text ]                       Y                   ""* callback           [  methods function ]                 Y                   return false* style                   [ css ]                          Y                   ""* icon                   [ url ]                           Y                   ""* iconStyle              [ css ]                           Y                   ""* iconPosition           [string]                          Y                   "left"*/content:"menu content",callback:"callbackMethods",style:"border-bottom:1px solid #fff;background:#333;line-height:30px;",icon:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2310514390,3580363630&fm=27&gp=0.jpg",iconStyle:"width:20px;height:20px;",iconPosition:"left",},{content:"右键菜单二",callback:"otherMethods"}],},}},methods:{callbackMethods(){// do something
            },otherMethods(){// do something
            }}}
</script>

 补充说明

  main.js引入并use之后,会增加全局指令v-rightMenu ,value为一个对象,value内所有api均已在上面例子说明,可为空的参数就可以不填写,都会有默认值或者本身就是可有可无的

 本插件优缺点说明

  相比较于大众化的右键插件他有如下优点:

  •   插件精悍短小,运行速度快
  •   不需要单独配置任何边界检测,插件本身自带了
  •   样式完全根据用户需求,自定义菜单的任何地方的样式
  • 使用简单,一个指令即可调用
  • 不会为页面渲染无用的dom,一切都是在你第一次使用时候才会进行加载,并且保证在之后的多次使用中,不会渲染多余dom
  •   支持菜单文字(content字段)使用html ,没错,你可以使用字体图标而不用拘泥于插件自身的图片图标,也可以使用不同的标签来表示你的菜单(当然我也考虑了如此做法,可能需要你必须要完整的吧标签写出来,否则可能会报错,这个问题后期我会进行修复,先看看效果)

  缺点说明:

  •   因为本菜单实现的是高度自定义,所以可能会让使用者需要定义很多样式,我只写了一些必要的样式,其余全部需要使用者来自定义(我也不知道这是个缺点还是优点,不过如果我是使用者我会觉得还是插件本身不带有很多的样式为好)
  • 因为设计插件时候,没有考虑到图标问题,所以导致后期有人和我说想要图标的时候,我加入图标功能进去,会导致图片稍微高于文字一些,这个小bug也是css本身自带的,而这个小bug恰好卡在了项目的痛点,也不算痛点吧,只是我工作上有一些事情也必须要尽快处理,而这个问题所以为了弥补这个问题,我加入了content内支持了html,也就是说如果你的要求很高,对视觉上,我建议你用字体图标,至于图片与文字的问题,我会在短期内尽快修复,修复好,我会第一时间发布

本插件旨在实现的是灵活 + 低配置 + 扩展性高 + 指令调用的快速右键菜单,正如你看到的我只需要一个指令,一个json,仅此而已。本插件对于新人还是老手均能适用,因为本插件是一款扩展性极高的插件,支持你配置菜单总样式、菜单选项样式、点击的回调函数、菜单选项的icon 甚至你能定义每一单独选项的样式以及icon。最后感谢大家的支持,如果喜欢的话请到github(https://github.com/JinZhenZon/rightmenu)为本插件点个star吧。使用中如有问题,请联系我的QQ:421217189

转载于:https://www.cnblogs.com/jinzhenzong/p/10036416.html

vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单相关推荐

  1. html下拉菜单插件,简单的jQuery大型下拉菜单插件

    booNavigation是一款简单的jQuery大型下拉菜单插件.通过该插件可以制作3列大型下拉菜单,并带有平滑过渡效果,以及鼠标滑过菜单项时的动画效果. 使用方法 在页面中引入jquery和boo ...

  2. html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码

    一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试:circle,disc,decimal ...

  3. Android m 自定义下拉菜单,Android实现动画效果的自定义下拉菜单功能

    我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...

  4. 我的世界服务器虚拟菜单插件,《我的世界》服务器快捷菜单插件怎么用?

    在桌面新建一个文本文件档,把以下内容复制到文本文档里面 ,[Shell] ,Command=2 IconFile=explorer.exe,3 [Taskbar] ,Command=ToggleDes ...

  5. 【_ 記 】vue中的slot属性和slot样式自定义

    slot属性的使用: slot代码 <el-tooltip placement="top" ><div slot="content" clas ...

  6. jQuery和CSS3超酷二级下拉菜单插件

    这是一款效果很酷又简单实用的 jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是 ...

  7. html5 menu下拉,jquery下拉菜单插件SelectMenu

    SelectMenu.js是一款简洁.易用.多样的jquery下拉菜单插件.SelectMenu下拉菜单插件功能强大,支持下拉,分页,键盘操作等功能.它的特点还有: 基于 jQuery1.x 开发, ...

  8. 多级联动下拉菜单插件:jquery.cxselect.js

    话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果.后来百度了下,在此做个总结吧. 下面是以一名php程序员的角度来分析的...可 ...

  9. html jquery 菜单选中,jQuery树形菜单插件多级菜单选中代码

    特效描述:jQuery 树形菜单插件 多级菜单选中.jQuery树形菜单插件,点击展开多级下拉菜单,点击选中菜单效果代码. 代码结构 1. 引入JS 2. HTML代码 打开 | 关闭 d = new ...

最新文章

  1. Postgresql死锁的处理
  2. 大话数据结构21 :关键路径
  3. matlab设置随机流的种子
  4. nucleo stlink 固件_自制nucleo,可以随意更换芯片,支持stlink,板载usbisp
  5. java中 Double和double区别
  6. “一百万行 Python 代码对任何人都足够了”!
  7. Jersey +jetty 实现微服务(一)
  8. css3位移过度效果,详解Css3新特性应用之过渡与动画
  9. 38.django的路由系统
  10. SQL处理非常见空串
  11. python答辩毕设ppt_如何制作优秀的毕业论文答辩 PPT?
  12. jenkins使用报错记录exception message 137
  13. excel浏览器直接下载
  14. js worker使用总结
  15. 比尔盖茨的风流情史,妻子同意他与前女友同居,婚内出轨损失 80 亿
  16. 招聘信息薪资范围是12-20K,能否要20K的薪资?
  17. python 爬取整部漫画(简单的图片爬取)
  18. 利用AutoSSH实现远程管理内网服务器
  19. 2022-06-18 jQuery遍历方法:$.each()方法遍历对象或数组的示例
  20. Markdown 基础入门

热门文章

  1. Devexpress中Tdxnavbar的使用
  2. Redis(3-3):列表类型
  3. 简单盘点手游开发引擎
  4. JDK、TOMCAT 配置环境变量
  5. lamp软件包安装(rpm)
  6. Python机器学习:线型回归法05衡量线性回归法的指标MES,RMS,MAE
  7. 三星android11推送,三星国行S10系列正式推送One UI 3正式版,基于安卓11打造
  8. git配置中文乱码_解决git中文乱码问题
  9. php变量显示,php – 显示会话变量
  10. java 指定垃g1圾收集_Java知识梳理--JVM