Wechat -menu-editor Custom menu editor for wechat

preface

In the development of wechat public account, basically the function will be developed is the function of wechat custom menu Settings, in line with the principle of not repeating the wheel, so based on Vue encapsulation of a wechat custom belt single component; The component refers to the public number background wySIWYG editing mode, while supporting read-only mode, can also be adapted to different functional requirements by scaling properties;

The installation

npm install wechat-menu-editor --save

use

Introduced the global

main.js

import WechatMenuEditor from 'wechat-menu-editor'
Vue.use(WechatMenuEditor);
Copy the code

Local introduction

import WechatMenuEditor from 'wechat-menu-editor'
Copy the code

use

<wechat-menu-editor></wechat-menu-editor>
Copy the code

attribute

  • The title titleString
</wechat menu-editor> </wechat menu-editor> </wechat menu-editor>Copy the code
  • Menus menu data

The data format

[{id: 0, type: 'default' name: '1' menu, children: [{id: 1, type: 'default' name: 'submenu 1}]}]Copy the code

Type Menu type: Add Add, default Default menu

  • Editable whether editable is editableBoolen

You can preview with this property, which defaults to true

  • Scale scaleNumber

You can scale with this property, which defaults to 100

The event

  • Menuselected menuselected events
Menuselected (menu){// Menu is the selected menu information.Copy the code

preview

  • No data

  • First-level menu editing

  • Secondary menu editing

The project addressWelcome to star

github

Github.com/OldsixShang…

npm

www.npmjs.com/package/wec…