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

具体样式代码查看项目开源代码库

创建一个某视频剪辑软件实例

！DOCTYPE html html head meta charset=' UTF-8 ' title/title script src=' http :https://cdn。bootscs。com/vue/2。5 .9/vue。js '/script/head dy div class=' content ' style=' width :900 px；margin:0 auto！- vue实例挂载的数字正射影像图元素- div id='app-menu '！-菜单预览界面- div class='weixin-preview'/div！-菜单编辑界面-div class=' weixin-menu-detail '/div/div/div脚本var app=new Vue({ El : ' # app-menu '，//挂载到对应的数字正射影像图元素数据： {微信Title: 'Vue.js公众号菜单', //菜单对象菜单： { ' button ' : [{ ' name ' : '主菜单1 '，' sub_button': [] }，{ 'name': '主菜单2 '，' sub_button': [] }，{ 'name': '主菜单3 '，' sub_button': [ { 'name': '子菜单1' }] }] },选择了枚举索引： ' ',//当前选中菜单索引selectedSubMenuIndex: ' '，//当前选中子菜单索引}，methods : { })/script/body/html(9500 . 163.com)

将菜单数据渲染到模版上

这里使用控制显示和迭代将数据渲染到模版上，最多会有3个主菜单以及每个主菜单最多会有5个子菜单。

div class=' weixin-preview ' div class=' weixin-HD ' div class=' weixin-title " { weixin title } }/div/div class=' weixin-BD ' ul class=' weixin-menu '！-这里使用迭代开始循环主菜单菜单中的-Li v-for='。BTN。name } }/span/div ul class=' weixin-sub menu '！-这里使用迭代开始循环主菜单下的子菜单- li v-for='(sub，I2)在BTN。sub _ button ' class=' menu-sub item ' div class=' menu-item-title ' span { { sub。名称} }/span/div/李！-这里使用控制显示判断子菜单小于5个，则添加按钮来添加子菜单——李。子按钮。长度5 ' class=' menu-sub item ' div class=' menu-item-title ' I class=' icon 14 _ menu _ add '/I/div/Li/ul/Li！-这里使用控制显示判断主菜单小于3个，则添加按钮来添加主菜单-Li class='菜单项' v-if='菜单。按钮。长度3 ' I class='图标14 _ menu _ add '/I/Li/ul/div/div(9501 . 163.com)

给某视频剪辑软件实例添加方法

在某视频剪辑软件实例中给方法对象中添加我们自定义的方法

methods: { //选中主菜单选中菜单：功能(一){本。selected submenuindex=' this。所选菜单索引=I }，//选中子菜单选中子菜单：功能(一){本。选定的子菜单索引=I }，//选中菜单级别选择了枚举级别：函数(){ if(this . selectedmenunindex！==' '这个。selectedsubmenuindex===' '){//主菜单返回1;} else if (this.selectedMenuIndex！=='' this.selectedSubMenuIndex！=='') { //子菜单返回2;} else { //未选中任何菜单返回0;} }, //添加菜单//参数水平为菜单级别，1为主菜单、2为子菜单addmenu :函数(level){ if(level==1 this。菜单。按钮。长度3){这个。菜单。按钮。push({ ' name ' : '菜单名称，sub _ button ' :[]})这个。selectedmenunindex=this。菜单。按钮。长度-1这个。selectedsubmenuindex=' ' } if(level==2 this。菜单。按钮[这个。selectedmenunindex].子按钮。长度5){这个。菜单。按钮[这个。所选菜单索引].sub_button.push({ 'name': '子菜单名称})这个。selectedsubmenuindex=this。菜单。按钮[这个。所选菜单索引].sub_button.length - 1 } }}给菜单绑定方法

当点击菜单触发选择菜单方法，点击添加按钮触发添加添加菜单方法。使用绑定事件来监听事件，它的缩写是@

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

使用v-bind :类来添加切换菜单选中时的班级.类为缩写

ul class=' weixin-menu ' id=' weixin-menu '！-判断如果selectedMenuIndex是当前点击的主菜单索引则添加目前的样式菜单中的- li v-for='(btn，I)。button ' class=' menu-item ' : class=' { current 3360 selected menu index===iseselected menu level()==1 } ' @ click=' selected menu(I)' div class=' menu-item-title ' span { { BTN。name } }/span/div！电视节目来切换是否显示这里如果选中了主菜单则子菜单弹出-ul class=' weixin-sub menu ' v-show=' selected menu index===I ' Li v-for='(sub，I2)在BTN。sub _ button ' class=' menu-sub item ' : class=' {当前选择的3360子菜单ui ndex===i2selected menu level()==2 ' @ click。stop=' selectedSubMenu(I2)' div class=' menu-item-title ' span { { sub。名称} }/span/div/span

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

总结

以上所述是小编给大家介绍的Vue.js实现微信公众号菜单编辑器功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！