快捷導(dǎo)航

Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(二)

更新時(shí)間：2018年05月08日 11:09:17 作者：sjxinghan

這篇文章主要介紹了Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(一)上一篇菜單的點(diǎn)擊和添加菜單功能已經(jīng)在模版實(shí)現(xiàn)了，接下來(lái)實(shí)現(xiàn)菜單的編輯功能

實(shí)現(xiàn)菜單刪除方法

在vue實(shí)例中添加刪除菜單方法，根據(jù)選中的菜單級(jí)別和索引來(lái)刪除。

methods: {
 //刪除菜單
 delMenu:function(){
  //刪除主菜單
  if(this.selectedMenuLevel()==1&&confirm('刪除后菜單下設(shè)置的子菜單也將被刪除')){
   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 = ''
   }
  }
 },
}

將方法綁定了菜單編輯界面

<div class="weixin-menu-detail">
 <!-- 顯示選中的菜單和刪除菜單按鈕 -->
 <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
  <div class="menu-name">{{menu.button[selectedMenuIndex].name}}</div>
   <div class="menu-del" @click="delMenu">刪除菜單</div>
  </div>
 </div>
 </div>

檢查菜單名稱輸入長(zhǎng)度

用v-model指令在輸入框綁定菜單名，@input監(jiān)聽輸入事件來(lái)檢查輸入的菜單名長(zhǎng)度，超出上限則顯示提示

data:{
 menuNameBounds:false,//菜單長(zhǎng)度超出上限標(biāo)記
},
methods:{
 //判斷菜單名長(zhǎng)度
 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
  }
 },
 //獲取字符串中文字符長(zhǎng)度
 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;
 }
}

添加菜單編輯界面和事件監(jiān)聽

v-model指令用來(lái)綁定菜單名輸入框的值，@input監(jiān)聽輸入事件來(lái)檢查輸入的菜單名長(zhǎng)度，長(zhǎng)度超出上線則顯示提示

<div class="weixin-menu-detail">
 <div class="menu-input-group">
  <div class="menu-label">菜單名稱</div>
  <div class="menu-input">
   <input type="text" name="name" placeholder="請(qǐng)輸入菜單名稱" class="menu-input-text" v-model="menu.button[selectedMenuIndex].name" @input="checkMenuName(menu.button[selectedMenuIndex].name)">
   <!-- 這里用v-show來(lái)判斷是否超過(guò)上限，menuNameBounds為true則顯示 -->
   <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字?jǐn)?shù)超過(guò)上限</p>
   <p class="menu-tips">字?jǐn)?shù)不超過(guò)4個(gè)漢字或8個(gè)字母</p>
  </div>
 </div>
</div>

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

實(shí)現(xiàn)選擇菜單類型方法

微信菜單有多種類型所以需要做個(gè)下拉列表，選中下拉項(xiàng)后顯示該項(xiàng)的內(nèi)容

先給每個(gè)菜單添加下類型

data:{
 "menu": {
  "button": [
  {
   "type": "click",
   "name": "主菜單1",
   "key": "測(cè)試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/"
   }
  }]
 }
}

創(chuàng)建的下拉列表也使用v-model指令來(lái)綁定選中的菜單類型

//獲取菜單類型 1. view網(wǎng)頁(yè)類型，2. media_id類型和view_limited類型 3. click點(diǎn)擊類型，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;
  }
 }
}
<div class="weixin-menu-detail">
 <div class="menu-input-group">
  <div class="menu-label">菜單內(nèi)容</div>
  <div class="menu-input">
   <select v-model="menu.button[selectedMenuIndex].type" name="type" class="menu-input-text">
    <option value="view">跳轉(zhuǎn)網(wǎng)頁(yè)(view)</option>
    <option value="media_id">發(fā)送消息(media_id)</option>
    <option value="miniprogram">打開指定小程序(miniprogram)</option>
    <option value="click">自定義點(diǎn)擊事件(click)</option>
   </select>
  </div>
 </div>
 <!-- 由于內(nèi)容類型很多，就以click類型為例 -->
 <div class="menu-content" v-if="selectedMenuType()==3">
  <div class="menu-input-group">
   <p class="menu-tips">用于消息接口推送，不超過(guò)128字節(jié)</p>
   <div class="menu-label">菜單KEY值</div>
   <div class="menu-input">
    <input type="text" class="menu-input-text" v-model="menu.button[selectedMenuIndex].key">
   </div>
  </div>
 </div>
</div>

菜單的添加、編輯、刪除功能基本完成了，總結(jié)一下學(xué)習(xí)到的知識(shí)

數(shù)組對(duì)象的修改使用Vue的變異方法參考
阻止事件冒泡使用Vue的事件修飾符參考
在切換菜單類型會(huì)有一些沒(méi)有聲明屬性，但vue初始化實(shí)例后不會(huì)監(jiān)聽沒(méi)有聲明的屬性，所以要使用Vue.set方法來(lái)將屬性添加到菜單對(duì)象上參考

彈窗組件使用的是layer

素材列表使用的模版是art-template

項(xiàng)目地址github

總結(jié)

以上所述是小編給大家介紹的Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(二)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: