Vue.js实现微信公众号菜单编辑器功能的示例分析-四川平武建站

RELATEED CONSULTING

新闻中心

这里有您想知道的互联网营销解决方案

Vue.js实现微信公众号菜单编辑器功能的示例分析

这篇文章给大家分享的是有关Vue.js实现微信公众号菜单编辑器功能的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联主要从事成都网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务政和,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

创建一个vue实例

Vue.js实现微信公众号菜单编辑器功能的示例分析

将菜单数据渲染到模版上

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


 
 {{weixinTitle}}

Vue.js实现微信公众号菜单编辑器功能的示例分析

给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为缩写