Vue.js实现微信公众号菜单编辑器功能（二)

Vue.js实现微信公众号菜单编辑器功能（一)上一篇菜单的点击和添加菜单功能已经在模版实现了，接下来实现菜单的编辑功能

实现菜单删除方法

在某视频剪辑软件实例中添加删除菜单方法，根据选中的菜单级别和索引来删除。

methods: { //删除菜单delMenu:function(){ //删除主菜单如果(这个。selectedmenu level()==1 confirm('删除后菜单下设置的子菜单也将被删除)){ if(this。selectedmenunindex===0){ this。菜单。按钮。拼接(这个。selectedmenunindex，1)；这个。所选菜单索引=0；} else { this。菜单。按钮。拼接(这个。选中菜单索引，1)；这个。所选菜单索引-=1；}如果(这个。菜单。按钮。长度==0){ this。selectedmenu index=' ' }//删除子菜单} else if(这个。所选菜单级别()==2){ if(this。选定的子菜单索引===0){ this。菜单。按钮[这个。所选菜单索引].子按钮。拼接(这个。selectedsubmenuindex，1)；这个。selected submenuindex=0；} else { this。菜单。按钮[这个。selectedmenu index].子按钮。拼接(这个。selectedsubmenuindex，1)；这个。selected submenuindex-=1；}如果(这个。菜单。按钮[这个。selectedmenu index].子按钮。长度==0){ this。selectedsubmenuindex=' ' } } }，}将方法绑定了菜单编辑界面

' div class='微信-菜单-详情！-显示选中的菜单和删除菜单按钮-div class=' menu-input-group ' style=' border-bottom : 2px # e8e 8 solid；'div class=' menu-name"{ menu。按钮[所选菜单索引].name } }/div div class=' menu-del ' @ click=' del menu '删除菜单/div /div /div检查菜单名称输入长度

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

数据： { menunamebounds : false，//菜单长度超出上限标记}，methods:{ //判断菜单名长度checkmenuname e :函数(val){ if(this。所选菜单级别()==1此。getmenunamelen(val)=8){ this。menunamends=false } else if(this。所选菜单级别()==2本。getmenunamelen(val)=16){ this。menunameunds=false } else { this。menunameunds=true } }，//获取字符串中文字符长度getmenunamellen :函数(val){ var len=0；for(var I=0；我值。长度；I){ var a=val。charat(一)；a.match(/[^\x00-\xff]/ig)！=null？len=2: len=1；}返回镜头；}}添加菜单编辑界面和事件监听

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

div class=' weixin-menu-detail ' div class=' menu-input-group ' div class=' menu-label '菜单名称/div div class=' menu-input ' input type=' text ' name=' name ' placeholder='请输入菜单名称class=' menu-input-text ' v-model=' menu。按钮[所选菜单索引].name ' @ input=' checkMenuName(菜单。按钮[selectedmenunindex]).名称)'!-这里用电视节目来判断是否超过上限，菜单项为真实的则显示-p class=' menu-tips ' style=' color : # e15f 63 ' v-show=' menuNameBounds '字数超过上限/p p class='菜单-提示'字数不超过四个汉字或8个字母/p/div/截图工具不显示删除的弹框，将就一下吧.

实现选择菜单类型方法

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

先给每个菜单添加下类型

data : { ' menu ' : { ' button ' :[{ ' type ' : ' click '，' name': '主菜单1 ','键' : '测试key '，' sub_button': [] }，{ 'name': '主菜单2 '，' sub _ button ' :[{ ' type ' : ' view '，' name': '子菜单，' URL ' : ' https://cn。vuejs。org/v2/guide/' }]}，{ 'name': '主菜单3 '，' sub _ button ' :[{ ' type ' : ' view '，' name': '子菜单，' URL ' : ' https://cn。vuejs。org/v2/guide/' } }]} }创建的下拉列表也使用v型指令来绑定选中的菜单类型

//获取菜单类型1。查看网页类型，2。media_id类型和view_limited类型3。单击单击类型，4。4.miniprogram表示applet类型的方法： { selected menu type 3360 function(){ switch(this。这个。选定的menuindex]。type) {case' view' :返回1；案例“media _ id”: return 2；案例“点击”:返回3；case ' mini program ' : return 4；} } } Div class=' weixin-menu-detail ' Div class=' menu-input-group ' Div class=' menu-label '菜单内容/Div div class=' menu-input '选择v-model=' menu . button[selected menu index]。type ' name=' type ' class=' menu-input-text '选项值=' view '跳转到网页(view)/Option选项值='media_id '发送消息(media _ id)/option选项值=' mini program '打开指定的applet/option选项值=' click '自定义单击事件/选项/select/div/div！-因为内容类型多，以点击类型为例-div class=' menu-content ' v-if=' selected menu type()==3 ' div class=' menu-input-group ' p class=' menu-tips '用于消息界面推送。最多128字节/p div class='menu-label' menu KEY值/div div class=' menu-input ' input type=' text ' class=' menu-input-text ' v-model=' menu。按钮[selectedmenuindex]。键'/div/div/div/div()

菜单的添加、编辑、删除功能基本完成。总结所学知识

数组对象的修改使用Vue的变异方法引用来防止事件冒泡。使用vue的事件修饰符引用在切换菜单类型时会有一些未声明的属性，但是Vue在初始化实例后不会监听未声明的属性，所以需要使用Vue.set方法给菜单对象添加属性。参考弹出组件使用图层

材料列表中使用的模板是艺术模板

项目地址github

摘要

如上所述，边肖向大家介绍的Vue.js实现了微信微信官方账号菜单编辑器(二)的功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！