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

将菜单数据渲染到模版上

这里使用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}}
 
 
 
  
  
  
 
 
 
 
 
 

感谢各位的阅读！关于“Vue.js实现微信公众号菜单编辑器功能的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！