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

前端之家收集整理的这篇文章主要介绍了Vue.js 实现微信公众号菜单编辑器功能(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

具体样式代码查看项目nofollow" target="_blank" href="https://github.com/hopex/vue-menu">github

创建一个vue实例

<Meta charset="UTF-8">

菜单数据渲染到模版上

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

给vue实例添加方法

在vue实例中给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为缩写

下篇给大家介绍 Vue.js 实现微信公众号菜单编辑器功能(二)

总结

以上所述是小编给大家介绍的Vue.js 实现微信公众号菜单编辑器功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

vue.jsvuejs微信公众号菜单编辑器微信编辑器

猜你在找的微信公众号相关文章