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


Posted in Javascript onNovember 29, 2018

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

安装

 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 style
          boxStyle:"width:150px;background:#f55;",
          // 菜单选项的样式 Style of menu options
          optionStyle:"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吧。

以上所述是小编给大家介绍的vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 #Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 #Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 #Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 #Javascript
js中this的指向问题归纳总结
Nov 28 #Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 #Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 #Javascript
You might like
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
详解Python多线程下的list
2020/07/03 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
说出数据连接池的工作机制是什么?
2013/04/19 面试题
入党申请人的自我鉴定
2013/12/01 职场文书
年终总结会主持词
2014/03/25 职场文书
搞笑结婚保证书
2015/05/08 职场文书
比赛主持人开场白
2015/05/29 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL