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