这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上)，Vue.js实现微信公众号菜单编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。

学习一段时间Vue.js，于是想尝试着做一个像微信平台里那样的菜单编辑器，在这里分享下

具体样式代码查看项目github

创建一个vue实例

var app = new Vue({

el: '#app-menu',//挂载到对应的DOM元素

data: {

weixinTitle: 'Vue.js公众号菜单',

//菜单对象

menu: {

"button": [

{

"name": "主菜单1",

"sub_button": []

},

{

"name": "主菜单2",

"sub_button": []

},

{

"name": "主菜单3",

"sub_button": [

{

"name": "子菜单1"

}]

}]

},

selectedMenuIndex:'',//当前选中菜单索引

selectedSubMenuIndex:'',//当前选中子菜单索引

},

methods: {

}

})

将菜单数据渲染到模版上

这里使用v-if和v-for将数据渲染到模版上，最多会有3个主菜单以及每个主菜单最多会有5个子菜单。

{{weixinTitle}}

• {{ btn.name }}

  • {{sub.name}}

给vue实例添加方法

在vue实例中给methods对象中添加我们自定义的方法methods: {

//选中主菜单

selectedMenu:function (i) {

this.selectedSubMenuIndex = ''

this.selectedMenuIndex = i

},

//选中子菜单

selectedSubMenu:function (i) {

this.selectedSubMenuIndex = i

},

//选中菜单级别

selectedMenuLevel: function () {

if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex === '') {

//主菜单

return 1;

} else if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex !== '') {

//子菜单

return 2;

} else {

//未选中任何菜单

return 0;

}

},

//添加菜单

//参数level为菜单级别，1为主菜单、2为子菜单

addMenu:function (level) {

if (level == 1 && this.menu.button.length < 3) {

this.menu.button.push({"name": "菜单名称",

"sub_button": []

})

this.selectedMenuIndex = this.menu.button.length - 1

this.selectedSubMenuIndex = ''

}

if (level == 2 && this.menu.button[this.selectedMenuIndex].sub_button.length < 5) {

this.menu.button[this.selectedMenuIndex].sub_button.push({

"name": "子菜单名称"

})

this.selectedSubMenuIndex = this.menu.button[this.selectedMenuIndex].sub_button.length - 1

}

}

}

给菜单绑定方法

当点击菜单触发selectedMenu方法，点击添加按钮触发添加addMenu方法。使用v-on来监听事件，它的缩写是@

监听点击事件@click ，为了防止子菜单点击事件冒泡的主菜单，则使用.stop事件修饰符来阻止冒泡@click.stop

使用v-bind:class来添加切换菜单选中时的class。:class为缩写

• {{ btn.name }}

  • {{sub.name}}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：