Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > 微信常用源码

微信小程序开发附源码:Vue.js 实现微信公众号菜单编辑器功能(二)

来源:中文源码网    浏览:510 次    日期:2024-03-29 09:21:06
【下载文档:  微信小程序开发附源码:Vue.js 实现微信公众号菜单编辑器功能(二).txt 】


Vue.js 实现微信公众号菜单编辑器功能(二)
Vue.js 实现微信公众号菜单编辑器功能(一)上一篇菜单的点击和添加菜单功能已经在模版实现了,接下来实现菜单的编辑功能
实现菜单删除方法
在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除。
methods: {
//删除菜单
delMenu:function(){
//删除主菜单
if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){
if(this.selectedMenuIndex===0){
this.menu.button.splice(this.selectedMenuIndex, 1);
this.selectedMenuIndex = 0;
}else{
this.menu.button.splice(this.selectedMenuIndex, 1);
this.selectedMenuIndex -=1;
}
if(this.menu.button.length==0){
this.selectedMenuIndex = ''
}
//删除子菜单
}else if(this.selectedMenuLevel()==2){
if(this.selectedSubMenuIndex===0){
this.menu.button[this.selectedMenuIndex].sub_button.splice(this.selectedSubMenuIndex, 1);
this.selectedSubMenuIndex = 0;
}else{
this.menu.button[this.selectedMenuIndex].sub_button.splice(this.selectedSubMenuIndex, 1);
this.selectedSubMenuIndex -= 1;
}
if(this.menu.button[this.selectedMenuIndex].sub_button.length==0){
this.selectedSubMenuIndex = ''
}
}
},
}
将方法绑定了菜单编辑界面





检查菜单名称输入长度
用v-model指令在输入框绑定菜单名,@input监听输入事件来检查输入的菜单名长度,超出上限则显示提示
data:{
menuNameBounds:false,//菜单长度超出上限标记
},
methods:{
//判断菜单名长度
checkMenuName:function(val){
if(this.selectedMenuLevel()==1&&this.getMenuNameLen(val)<=8){
this.menuNameBounds=false
}else if(this.selectedMenuLevel()==2&&this.getMenuNameLen(val)<=16){
this.menuNameBounds=false
}else{
this.menuNameBounds=true
}
},
//获取字符串中文字符长度
getMenuNameLen: function (val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
a.match(/[^\x00-\xff]/ig) != null?len += 2:len += 1;
}
return len;
}
}
添加菜单编辑界面和事件监听
v-model指令用来绑定菜单名输入框的值,@input监听输入事件来检查输入的菜单名长度,长度超出上线则显示提示



截图工具不显示删除的弹框,将就一下吧...
实现选择菜单类型方法
微信菜单有多种类型所以需要做个下拉列表,选中下拉项后显示该项的内容
先给每个菜单添加下类型
data:{
"menu": {
"button": [
{
"type": "click",
"name": "主菜单1",
"key": "测试key",
"sub_button": []
},
{
"name": "主菜单2",
"sub_button": [
{
"type": "view",
"name": "子菜单",
"url": "http://cn.vuejs.org/v2/guide/"
}]
},
{
"name": "主菜单3",
"sub_button": [
{
"type": "view",
"name": "子菜单",
"url": "http://cn.vuejs.org/v2/guide/"
}
}]
}
}
创建的下拉列表也使用v-model指令来绑定选中的菜单类型
//获取菜单类型 1. view网页类型,2. media_id类型和view_limited类型 3. click点击类型,4.miniprogram表示小程序类型
methods: {
selectedMenuType: function () {
switch (this.menu.button[this.selectedMenuIndex].type) {
case 'view':return 1;
case 'media_id':return 2;
case 'click':return 3;
case 'miniprogram':return 4;
}
}
}





菜单的添加、编辑、删除功能基本完成了,总结一下学习到的知识
数组对象的修改使用Vue的变异方法参考
阻止事件冒泡使用Vue的事件修饰符参考
在切换菜单类型会有一些没有声明属性,但vue初始化实例后不会监听没有声明的属性,所以要使用Vue.set方法来将属性添加到菜单对象上参考
弹窗组件使用的是layer
素材列表使用的模版是art-template
项目地址github
总结
以上所述是小编给大家介绍的Vue.js 实现微信公众号菜单编辑器功能(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持!

相关内容