这次给大家带来如何使用vue.js实现微信公众号菜单编辑器（案例代码），使用vue.js实现微信公众号菜单编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。
实现菜单删除方法
在vue实例中添加删除菜单方法，根据选中的菜单级别和索引来删除。
methods: {
//删除菜单
delmenu:function(){
//删除主菜单
if(this.selectedmenulevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){
if(this.selectedmenuindex===0){
this.menu.button.splice(this.selectedmenuindex, 1);
this.selectedmenuindex = 0;
}else{
this.menu.button.splice(this.selectedmenuindex, 1);
this.selectedmenuindex -=1;
}
if(this.menu.button.length==0){
this.selectedmenuindex = ''
}
//删除子菜单
}else if(this.selectedmenulevel()==2){
if(this.selectedsubmenuindex===0){
this.menu.button[this.selectedmenuindex].sub_button.splice(this.selectedsubmenuindex, 1);
this.selectedsubmenuindex = 0;
}else{
this.menu.button[this.selectedmenuindex].sub_button.splice(this.selectedsubmenuindex, 1);
this.selectedsubmenuindex -= 1;
}
if(this.menu.button[this.selectedmenuindex].sub_button.length==0){
this.selectedsubmenuindex = ''
}
}
},
}
将方法绑定了菜单编辑界面
<p class="weixin-menu-detail">
<!-- 显示选中的菜单和删除菜单按钮 -->
<p class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
<p class="menu-name">{{menu.button[selectedmenuindex].name}}</p>
<p class="menu-del" @click="delmenu">删除菜单</p>
</p>
</p>
</p>
检查菜单名称输入长度
用v-model指令在输入框绑定菜单名，@input监听输入事件来检查输入的菜单名长度，超出上限则显示提示
data:{
menunamebounds:false,//菜单长度超出上限标记
},
methods:{
//判断菜单名长度
checkmenuname:function(val){
if(this.selectedmenulevel()==1&&this.getmenunamelen(val)<=8){
this.menunamebounds=false
}else if(this.selectedmenulevel()==2&&this.getmenunamelen(val)<=16){
this.menunamebounds=false
}else{
this.menunamebounds=true
}
},
//获取字符串中文字符长度
getmenunamelen: function (val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charat(i);
a.match(/[^\x00-\xff]/ig) != null?len += 2:len += 1;
}
return len;
}
}
添加菜单编辑界面和事件监听
v-model指令用来绑定菜单名输入框的值，@input监听输入事件来检查输入的菜单名长度，长度超出上线则显示提示
<p class="weixin-menu-detail">
<p class="menu-input-group">
<p class="menu-label">菜单名称</p>
<p class="menu-input">
<input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="menu.button[selectedmenuindex].name" @input="checkmenuname(menu.button[selectedmenuindex].name)">
<!-- 这里用v-show来判断是否超过上限，menunamebounds为true则显示 -->
<p class="menu-tips" style="color:#e15f63" v-show="menunamebounds">字数超过上限</p>
<p class="menu-tips">字数不超过4个汉字或8个字母</p>
</p>
</p>
</p>
截图工具不显示删除的弹框，将就一下吧...
实现选择菜单类型方法
微信菜单有多种类型所以需要做个下拉列表，选中下拉项后显示该项的内容
先给每个菜单添加下类型
data:{
menu: {
button: [
{
type: click,
name: 主菜单1,
key: 测试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-model指令来绑定选中的菜单类型
//获取菜单类型 1. view网页类型，2. media_id类型和view_limited类型 3. click点击类型，4.miniprogram表示小程序类型
methods: {
selectedmenutype: function () {
switch (this.menu.button[this.selectedmenuindex].type) {
case 'view':return 1;
case 'media_id':return 2;
case 'click':return 3;
case 'miniprogram':return 4;
}
}
}
<p class="weixin-menu-detail">
<p class="menu-input-group">
<p class="menu-label">菜单内容</p>
<p class="menu-input">
<select v-model="menu.button[selectedmenuindex].type" name="type" class="menu-input-text">
<option value="view">跳转网页(view)</option>
<option value="media_id">发送消息(media_id)</option>
<option value="miniprogram">打开指定小程序(miniprogram)</option>
<option value="click">自定义点击事件(click)</option>
</select>
</p>
</p>
<!-- 由于内容类型很多，就以click类型为例 -->
<p class="menu-content" v-if="selectedmenutype()==3">
<p class="menu-input-group">
<p class="menu-tips">用于消息接口推送，不超过128字节</p>
<p class="menu-label">菜单key值</p>
<p class="menu-input">
<input type="text" class="menu-input-text" v-model="menu.button[selectedmenuindex].key">
</p>
</p>
</p>
</p>
菜单的添加、编辑、删除功能基本完成了，总结一下学习到的知识
数组对象的修改使用vue的变异方法参考
阻止事件冒泡使用vue的事件修饰符参考
在切换菜单类型会有一些没有声明属性，但vue初始化实例后不会监听没有声明的属性，所以要使用vue.set方法来将属性添加到菜单对象上参考
弹窗组件使用的是layer
素材列表使用的模版是art-template
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用vue.js实现微信公众号菜单编辑器（思路详解）
怎样使用js实现计算圆周率到小数点后100位
以上就是如何使用vue.js实现微信公众号菜单编辑器（案例代码）的详细内容。