How to use Vue.js to implement the WeChat public account menu editor (case code)

This time I will show you how to use Vue.js to implement the WeChat public account menu Editor (case code), and how to use Vue.js to implement the WeChat public account menu editorNotesWhat are they? The following is a practical case. Let’s take a look.

Implement the menu deletion method

Add the delete menu method in the vue instance, and delete it according to the selected menu level and index.

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 = ''
   }
  }
 },
}

Bind the method to the menu editing interface

<p class="weixin-menu-detail">
 <!-- 显示选中的菜单和删除菜单按钮 -->
 <p class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
  <p class="menu-name">{{menu.button[selectedMenuIndex].name}}</p>
   <p class="menu-del" @click="delMenu">删除菜单</p>
  </p>
 </p>
 </p>

Check the menu name input length

Use the v-model command to bind the menu name to the input box. @input listens to the input event to check the length of the entered menu name. If it exceeds the upper limit, a prompt will be displayed

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;
 }
}

Add menu editing interface and event monitoring

The v-model command is used to bind the value of the menu name input box. @input monitors the input event to check the length of the entered menu name. The length exceeds When online, a prompt will be displayed

<p class="weixin-menu-detail">
 <p class="menu-input-group">
  <p class="menu-label">菜单名称</p>
  <p class="menu-input">
   <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="menu.button[selectedMenuIndex].name" @input="checkMenuName(menu.button[selectedMenuIndex].name)">
   <!-- 这里用v-show来判断是否超过上限，menuNameBounds为true则显示 -->
   <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
   <p class="menu-tips">字数不超过4个汉字或8个字母</p>
  </p>
 </p>
</p>

The screenshot tool does not display the deleted pop-up box, just make do with it...

Realize the selection Menu type method

There are many types of WeChat menus, so you need to make a drop-down list. After selecting the drop-down item, the content of the item will be displayed

First Add the following type to each menu

data:{
 "menu": {
  "button": [
  {
   "type": "click",
   "name": "主菜单1",
   "key": "测试key",
   "sub_button": []
  },
  {
   "name": "主菜单2",
   "sub_button": [
   {
    "type": "view",
    "name": "子菜单",
    "url": "https://cn.vuejs.org/v2/guide/"
   }]
  },
  {
   "name": "主菜单3",
   "sub_button": [
   {
    "type": "view",
    "name": "子菜单",
    "url": "https://cn.vuejs.org/v2/guide/"
   }
  }]
 }
}

The created drop-down list also uses the v-model directive to bind the selected menu type

//获取菜单类型 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;
  }
 }
}
<p class="weixin-menu-detail">
 <p class="menu-input-group">
  <p class="menu-label">菜单内容</p>
  <p class="menu-input">
   <select v-model="menu.button[selectedMenuIndex].type" name="type" class="menu-input-text">
    <option value="view">跳转网页(view)</option>
    <option value="media_id">发送消息(media_id)</option>
    <option value="miniprogram">打开指定小程序(miniprogram)</option>
    <option value="click">自定义点击事件(click)</option>
   </select>
  </p>
 </p>
 <!-- 由于内容类型很多，就以click类型为例 -->
 <p class="menu-content" v-if="selectedMenuType()==3">
  <p class="menu-input-group">
   <p class="menu-tips">用于消息接口推送，不超过128字节</p>
   <p class="menu-label">菜单KEY值</p>
   <p class="menu-input">
    <input type="text" class="menu-input-text" v-model="menu.button[selectedMenuIndex].key">
   </p>
  </p>
 </p>
</p>

Addition of menu , editing, and deletion functions are basically completed. Let’s summarize the knowledge learned

• Use Vue’s mutation method to modify the array object. Reference

• Block Event bubbling uses Vue's event modifier reference

• There will be some undeclared properties when switching menu types, but Vue will not listen to undeclared properties after initializing the instance, so Vue must be used .set method to add attributes to the menu object. Reference

The pop-up component uses layer

The template used for the material list is art-template

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use Vue.js to implement the WeChat public account menu editor (detailed idea)

How Use JS to calculate pi to 100 decimal places

The above is the detailed content of How to use Vue.js to implement the WeChat public account menu editor (case code). For more information, please follow other related articles on the PHP Chinese website!