Vue.js如何实现微信公众号菜单编辑器功能

　　介绍

这篇文章将为大家详细讲解有关Vue。js如何实现微信公众号菜单编辑器功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<>强实现菜单删除方法

在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除。

方法:,{ 　　,//删除菜单 　　,delMenu:函数(){//才能删除主菜单 　　如果才能(this.selectedMenuLevel()==1,和确认(& # 39;删除后菜单下设置的子菜单也将被删除& # 39;)){ 　　,,如果(this.selectedMenuIndex===0) { 　　,,,this.menu.button.splice (this.selectedMenuIndex, 1); 　　,,,this.selectedMenuIndex =, 0; 　　其他,,}{ 　　,,,this.menu.button.splice (this.selectedMenuIndex, 1); 　　,,,this.selectedMenuIndex  -=1; 　　,,} 　　,,如果(this.menu.button.length==0) { 　　,,,this.selectedMenuIndex =, & # 39; & # 39; 　　,,}//才能删除子菜单 　　}才能else 如果(this.selectedMenuLevel ()==2) { 　　,,如果(this.selectedSubMenuIndex===0) { 　　,,,this.menu.button [this.selectedMenuIndex] .sub_button.splice (this.selectedSubMenuIndex, 1); 　　,,,this.selectedSubMenuIndex =, 0; 　　其他,,}{ 　　,,,this.menu.button [this.selectedMenuIndex] .sub_button.splice (this.selectedSubMenuIndex, 1); 　　,,,this.selectedSubMenuIndex  -=, 1; 　　,,} 　　,,如果(this.menu.button [this.selectedMenuIndex] .sub_button.length==0) { 　　,,,this.selectedSubMenuIndex =, & # 39; & # 39; 　　,,} 　　,,} 　　}, 　　}

<强>将方法绑定了菜单编辑界面

& lt; div 类=皐eixin-menu-detail"比; 　　,& lt; !——,显示选中的菜单和删除菜单按钮,——比; 　　,& lt; div 类=癿enu-input-group",在 　　& lt;才能div 类=癿enu-name"在{{menu.button [selectedMenuIndex] . name}} & lt;/div> 　　,,& lt; div 类=癿enu-del", @click=癲elMenu"在删除菜单& lt;/div> 　　& lt;才能/div> 　　,& lt;/div> 　　,& lt;/div>

<>强检查菜单名称输入长度

用v模型指令在输入框绑定菜单名,@input监听输入事件来检查输入的菜单名长度,超出上限则显示提示

数据:{ 　　,menuNameBounds:假的,//菜单长度超出上限标记 　　}, 　　方法:{ 　　,//判断菜单名长度 　　,checkMenuName:函数(val) { 　　如果才能(this.selectedMenuLevel ()==1,, this.getMenuNameLen (val) & lt;=8) { 　　,,this.menuNameBounds=false 　　}才能else 如果(this.selectedMenuLevel()==2,和this.getMenuNameLen (val) & lt;=16) { 　　,,this.menuNameBounds=false 　　}{其他才能 　　,,this.menuNameBounds=true 　　,,} 　　}, 　　,//获取字符串中文字符长度 　　,getMenuNameLen: function  (val), { 　　var 才能;len =, 0; 　　for 才能;(var 小姐:=,0;,小姐:& lt;, val.length;,我+ +),{ 　　,,var  a =, val.charAt(我); 　　,,a.match (/[^ \ x00 - \ xff]/ig), !=,零? len  +=, 2: len  +=, 1; 　　,,} 　　return 才能;兰; 　　,} 　　}

<>强添加菜单编辑界面和事件监听

v模型指令用来绑定菜单名输入框的值,@input监听输入事件来检查输入的菜单名长度,长度超出上线则显示提示

& lt; div 类=皐eixin-menu-detail"比; 　　,& lt; div 类=癿enu-input-group"比; 　　& lt;才能div 类=癿enu-label"在菜单名称& lt;/div> 　　& lt;才能div 类=癿enu-input"比; 　　,,& lt; input 类型=皌ext", name=皀ame",占位符=扒胧淙氩说ッ啤?类=癿enu-input-text", v模型=癿enu.button [selectedMenuIndex] .name", @input=癱heckMenuName (menu.button [selectedMenuIndex] . name)“比; 　　,,& lt; !——,这里用v-show来判断是否超过上限,menuNameBounds为真则显示,——比; 　　,,& lt; p 类=癿enu-tips",, v-show=癿enuNameBounds"在字数超过上限& lt;/p> 　　,,& lt; p 类=癿enu-tips"在字数不超过4个汉字或8个字母& lt;/p> 　　& lt;才能/div> 　　,& lt;/div> 　　& lt;/div>

截图工具不显示删除的弹框,将就一下吧…

Vue。js如何实现微信公众号菜单编辑器功能

<强>实现选择菜单类型方法

微信菜单有多种类型所以需要做个下拉列表,选中下拉项后显示该项的内容

先给每个菜单添加下类型

数据:{ 　　,“menu": { 　　“button"才能:, 　　{才能 　　,才能“type":,“click" 　　,才能“name":,“主菜单1“, 　　,才能“key":,“测试key", 　　,才能“sub_button":, [] 　　,,}, 　　{才能 　　,才能“name":,“主菜单2“, 　　,才能“sub_button":, 　　,,{ 　　,,,“type":,“调整前, 　　,,,“name":,“子菜单“, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

Vue.js如何实现微信公众号菜单编辑器功能