我的第一個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