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的微信自定义菜单编辑器的更多相关文章

  1. 如何发布一个npm包(基于vue)

    前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...

  2. 从零开始写一个npm包及上传

    最近刚好自己需要写公有npm包及上传,虽然百度上资料都能找到,但是都是比较零零碎碎的,个人就来整理下,如何从零开始写一个npm包及上传. 该篇文件只记录一个大概的流程,一些细节没有记录. tips:  ...

  3. 从0到1发布一个npm包

    从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...

  4. 如何开发一个npm包并发布到npm中央仓库

    转自: https://liaolongdong.com/2019/01/24/publish-public-npm.html 如何开发一个npm包并发布到npm中央仓库需求背景:平时在项目工作中可能 ...

  5. 从零开始写一个npm包,一键生成react组件(偷懒==提高效率)

    前言 最近写项目开发新模块的时候,每次写新模块的时候需要创建一个组件的时候(包含组件css,index.js,组件js),就只能会拷贝其他组件修改名称 ,但是写了1-2个后发现效率太低了,而且极容易出 ...

  6. 发布一个npm包(webpack loader)

    发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...

  7. 如何发布一个 npm 包

    一 背景 在工作时,突然接到经理的一个要求,需要将一个react的高阶组件函数封装成一个npm包.之前从没弄过,当场还是有些懵逼的,但是这毕竟是工作,不能推脱.于是开始了学习.汤坑之旅.最终包发布,线 ...

  8. (转)前端开发-发布一个NPM包之最简单易懂流程

    原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...

  9. 如何开发一个npm包并发布

    一.安装nodejs 不多说了,网上教程多得是 二.创建自己的npm包 目录结构 npm-test a.js b.js package.json 开发 为了简单便于理解,就开发一个简单地hello程序 ...

随机推荐

  1. java小游戏java九宫格

    问题来源于吾爱破解https://www.52pojie.cn/thread-1484202-1-1.html 编程目标一:根据下面的"游戏说明",实现该游戏程序,完成响应用户的输 ...

  2. 创建函数,传递一个数字n,返回斐波那契数列的第n的值。

    斐波那契数列 第1项和第2项的值是1,从第3项开始,每项的值是前两项相加的和 1   1   2    3    5    8    13    21...... 法1: function fn(n) ...

  3. springboot整合ehcache缓存失效

    最近做了个微信公众号后台,因为只是单应用就选用了ehcache来做本地缓存,主要是用于缓存微信的accece_token和jsapi_ticket.在使用ehcache的时候遇到了@Cacheable ...

  4. WebRTC 用例和性能

    WebRTC 用例和性能 实现低延迟.点对点传输是一项艰巨的工程挑战:有 NAT 遍历和连接检查.信令.安全.拥塞控制和无数其他细节需要处理.WebRTC 代表我们处理以上所有内容,这就是为什么它可以 ...

  5. HCIA—(网络初相识)

    网络 IT--> 信息服务 -->数据底层 云计算 大数据 CT--> 通信服务 -->通信服务 构建数据通信的协议 ICT-->信息通信 数据 + 通信 数通 基础 R ...

  6. C++实现链表的相关基础操作

    链表的相关基础操作 # include <iostream> using namespace std; typedef struct LNode { int data; //结点的数据域 ...

  7. 深入理解jvm-2Edition-虚拟机类加载机制

    1.概述-什么是类加载? 将Class文件从其他地方(外存.字节流甚至是网络流中)载入内存, 并对其中数据进行校验.转换解析和初始化,最终从其中提取出能够被虚拟机使用的Java类型. 用图纸造模子,该 ...

  8. Golang语言系列-19-发布系统

    发布系统 后端代码:https://gitee.com/lichengguo/yiihua_ops_go 前端代码:https://gitee.com/lichengguo/yiihua_ops_ht ...

  9. 大数的快速幂模 Python实现

    要求 实现模幂算法,通过服务器的检验. 访问http://2**.207.12.156:9012/step_04服务器会给你10个问题,每个问题包含三个数(a,b,c),请给出a^b%c的值.返回值写 ...

  10. SpringCloud升级之路2020.0.x版-21.Spring Cloud LoadBalancer简介

    本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford 我们使用 Spri ...