如何使用Vue.js實作微信公眾號選單編輯器（案例代碼）

這次帶給大家如何使用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 = ''
   }
  }
 },
}

將方法綁定了選單編輯介面

#

<p>
 <!-- 显示选中的菜单和删除菜单按钮 -->
 </p><p>
  </p><p>{{menu.button[selectedMenuIndex].name}}</p>
   <p>删除菜单</p>
  
 
 

檢查選單名稱輸入長度

用v-model指令在輸入框中綁定選單名，@input監聽輸入事件來檢查輸入的選單名長度，超出上限則顯示提示

data:{
 menuNameBounds:false,//菜单长度超出上限标记
},
methods:{
 //判断菜单名长度
 checkMenuName:function(val){
  if(this.selectedMenuLevel()==1&&this.getMenuNameLen(val)<p style="text-align: left;"><span style="color: #ff0000"><strong>新增選單編輯介面和事件監聽</strong></span></p><p style="text-align: left;">v-model指令用來綁定選單名輸入框的值，@input監聽輸入事件來檢查輸入的選單名稱長度，長度超出上線則顯示提示</p><pre class="brush:php;toolbar:false"><p>
 </p><p>
  </p><p>菜单名称</p>
  <p>
   <input>
   <!-- 这里用v-show来判断是否超过上限，menuNameBounds为true则显示 -->
   </p><p>字数超过上限</p>
   <p>字数不超过4个汉字或8个字母</p>
  
 

截圖工具不顯示刪除的彈框，將會就一下吧...

##實作選擇選單類型方法

微信選單有多種類型所以需要做個

下拉清單，勾選下拉項目後顯示該項目的內容

先為每個選單新增下類型

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/"
   }
  }]
 }
}

建立的下拉清單也使用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;
  }
 }
}
<p>
 </p><p>
  </p><p>菜单内容</p>
  <p>
   <select>
    <option>跳转网页(view)</option>
    <option>发送消息(media_id)</option>
    <option>打开指定小程序(miniprogram)</option>
    <option>自定义点击事件(click)</option>
   </select>
  </p>
 
 <!-- 由于内容类型很多，就以click类型为例 -->
 <p>
  </p><p>
   </p><p>用于消息接口推送，不超过128字节</p>
   <p>菜单KEY值</p>
   <p>
    <input>
   </p>
  
 

選單的添加、編輯、刪除功能基本上完成了，總結一下學習到的知識

• 數組物件的修改使用Vue的變異方法參考

##阻止事件冒泡使用Vue的事件修飾符參考
在切換選單型別會有一些沒有宣告屬性，但vue初始化實例後不會監聽沒有宣告的屬性，所以要使用Vue .set方法來將屬性加入到選單物件上參考
彈出視窗元件使用的是layer

素材清單使用的模版是art-template

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用Vue.js實作微信公眾號選單編輯器（思維詳解）

怎樣使用JS實作計算圓周率到小數點後100位元

以上是如何使用Vue.js實作微信公眾號選單編輯器（案例代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！