我的第一個npm包:wechat-menu-editor 基於Vue的微信自定義選單編輯器

CharlesShang發表於2021-09-08

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 擴充屬性來儲存附加資訊,例如:區分事件、連結
}

預覽

  • 無資料
    image.png

  • 一級選單編輯
    image.png
    image.png

  • 二級選單編輯
    image.png

專案地址 歡迎star

github

https://github.com/OldsixShang/wechat-menu-editor

npm

https://www.npmjs.com/package/wechat-menu-editor

相關文章