真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

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

 
 
  {{menu.button[selectedMenuIndex].name}}

檢查菜單名稱輸入長度

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

data:{
 menuNameBounds:false,//菜單長度超出上限標(biāo)記
},
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;
 }
}

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

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

 
  菜單名稱
  
   
   
   字?jǐn)?shù)超過上限

   字?jǐn)?shù)不超過4個漢字或8個字母

  
 

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

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

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

先給每個菜單添加下類型

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

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

//獲取菜單類型 1. view網(wǎng)頁類型，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;
  }
 }
}

 
  菜單內(nèi)容
  
   
    跳轉(zhuǎn)網(wǎng)頁(view)
    發(fā)送消息(media_id)
    打開指定小程序(miniprogram)
    自定義點擊事件(click)
   
  
 
 
 
  
   用于消息接口推送，不超過128字節(jié)

   菜單KEY值
   
    
   
  
 

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

• 數(shù)組對象的修改使用Vue的變異方法參考

• 阻止事件冒泡使用Vue的事件修飾符參考

• 在切換菜單類型會有一些沒有聲明屬性，但vue初始化實例后不會監(jiān)聽沒有聲明的屬性，所以要使用Vue.set方法來將屬性添加到菜單對象上參考

彈窗組件使用的是layer

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

關(guān)于“Vue.js如何實現(xiàn)微信公眾號菜單編輯器功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。