我的第一个npm包:wechat-menu-editor 基于Vue的微信自定义菜单编辑器
wechat-menu-editor 微信自定义菜单编辑器
前言
在做微信公众号相关开发时,基本上会去开发的功能就是微信自定义菜单设置的功能,本着不重复造轮子的原则,于是基于Vue封装的一个微信自定义带单组件;组件参照了公众号后台的所见即所得的编辑方式,同时支持只读模式,也可以根据通过缩放属性适配不同的功能要求;
安装
npm install wechat-menu-editor --save
使用
全局引入
main.js
import WechatMenuEditor from 'wechat-menu-editor'
Vue.use(WechatMenuEditor);
局部引入
import WechatMenuEditor from 'wechat-menu-editor'
使用
<wechat-menu-editor></wechat-menu-editor>
属性
- title 标题
String
<wechat-menu-editor :title="这是公众号标题"></wechat-menu-editor>
- menus 菜单数据
数据格式
[
{
id:0,
type:'default',
name:'菜单1',
children:[{
id:1,
type:'default',
name:'子菜单1'
}]
}
]
type 菜单类型 :
add 添加
,default 默认菜单
- editable 是否可编辑
Boolen
可以通过此属性实现预览功能,默认值为
true
- scale 缩放比例
Number
可以通过此属性实现缩放,默认值为
100
事件
- menuselected 菜单选中事件
menuselected(menu){
// menu 为选中的菜单信息
// 这里可以给menu 拓展属性来存储附加信息,例如:区分事件、链接
}
预览
无数据
一级菜单编辑
二级菜单编辑
项目地址 欢迎star
github
https://github.com/OldsixShang/wechat-menu-editor
npm
https://www.npmjs.com/package/wechat-menu-editor
我的第一个npm包:wechat-menu-editor 基于Vue的微信自定义菜单编辑器的更多相关文章
- 如何发布一个npm包(基于vue)
前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...
- 从零开始写一个npm包及上传
最近刚好自己需要写公有npm包及上传,虽然百度上资料都能找到,但是都是比较零零碎碎的,个人就来整理下,如何从零开始写一个npm包及上传. 该篇文件只记录一个大概的流程,一些细节没有记录. tips: ...
- 从0到1发布一个npm包
从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...
- 如何开发一个npm包并发布到npm中央仓库
转自: https://liaolongdong.com/2019/01/24/publish-public-npm.html 如何开发一个npm包并发布到npm中央仓库需求背景:平时在项目工作中可能 ...
- 从零开始写一个npm包,一键生成react组件(偷懒==提高效率)
前言 最近写项目开发新模块的时候,每次写新模块的时候需要创建一个组件的时候(包含组件css,index.js,组件js),就只能会拷贝其他组件修改名称 ,但是写了1-2个后发现效率太低了,而且极容易出 ...
- 发布一个npm包(webpack loader)
发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...
- 如何发布一个 npm 包
一 背景 在工作时,突然接到经理的一个要求,需要将一个react的高阶组件函数封装成一个npm包.之前从没弄过,当场还是有些懵逼的,但是这毕竟是工作,不能推脱.于是开始了学习.汤坑之旅.最终包发布,线 ...
- (转)前端开发-发布一个NPM包之最简单易懂流程
原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...
- 如何开发一个npm包并发布
一.安装nodejs 不多说了,网上教程多得是 二.创建自己的npm包 目录结构 npm-test a.js b.js package.json 开发 为了简单便于理解,就开发一个简单地hello程序 ...
随机推荐
- 大数据学习(07)——Hadoop3.3高可用环境搭建
前面用了五篇文章来介绍Hadoop的相关模块,理论学完还得操作一把才能加深理解.这一篇我会花相当长的时间从环境搭建开始,到怎么在使用Hadoop,逐步介绍Hadoop的使用. 本篇分这么几段内容: 规 ...
- Linux--文件描述符、文件指针、索引节点
Linux -- 文件描述符 文件描述符 Fd 当进程打开文件或创建新文件时,内核会返回一个文件描述符(非负整数),用来指向被打开的文件,所有执行I/O操作的系统调用(read.write)都会通过文 ...
- Calcite(一):javacc语法框架及使用
是一个动态数据管理框架. 它包含许多组成典型数据库管理系统的部分,但省略了存储原语.它提供了行业标准的SQL解析器和验证器,具有可插入规则和成本函数的可自定义优化器,逻辑和物理代数运算符,从SQL到代 ...
- DL基础补全计划(五)---数值稳定性及参数初始化(梯度消失、梯度爆炸)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- 简单的整合 shiro + SpringMVC 例子
简单的整合shiro和springmvc的例子 想要整合Shiro和springmvc,在网上找了很多例子,感觉都有一点复杂.所以就自己写了一个最简单整合项目,记录在这里以备后面查看. 这个例子包含如 ...
- Docker小白到实战之开篇概述
前言 "不对啊,在我这运行很正常啊",这句话小伙伴们在前几年应该听得很多:每次一到安装.部署时总有一堆问题,毕竟操作系统版本.软件环境.硬件资源.网络等因素在作怪,此时难免会导致开 ...
- SpringMVC学习03(控制器Controller)
3.控制器Controller 3.1 控制器Controller 控制器复杂提供访问应用程序的行为,通常通过接口定义或注解定义两种方法实现. 控制器负责解析用户的请求并将其转换为一个模型. 在Spr ...
- Linux引导过程和服务过程
目录 一.Linux操作系统引导过程 1.1.开机自检 1.2.MBR引导 1.3.GRUB菜单 1.4.加载Linux内核 1.5.init进程初始化 二.系统初始化进程 2.1.init进程 2. ...
- maven的setting配置远程仓库
maven的setting,配置远程库. <mirror> <id>nexus-aliyun</id> <mirrorOf>central</mi ...
- Java多线程 面试知识点总结1
一.JMM(Java内存模型) 参考 老刘-JMM面试包过 HollisChuang-Java内存模型 <Java并发编程实战>Chapter-16 <深入理解Java虚拟机> ...