Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(二)
Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(一)上一篇菜單的點擊和添加菜單功能已經(jīng)在模版實現(xiàn)了,接下來實現(xiàn)菜單的編輯功能
實現(xiàn)菜單刪除方法
在vue實例中添加刪除菜單方法,根據(jù)選中的菜單級別和索引來刪除。
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>
檢查菜單名稱輸入長度
用v-model指令在輸入框綁定菜單名,@input監(jiān)聽輸入事件來檢查輸入的菜單名長度,超出上限則顯示提示
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; } }
添加菜單編輯界面和事件監(jiān)聽
v-model指令用來綁定菜單名輸入框的值,@input監(jiān)聽輸入事件來檢查輸入的菜單名長度,長度超出上線則顯示提示
<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="請輸入菜單名稱" 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">字數(shù)超過上限</p> <p class="menu-tips">字數(shù)不超過4個漢字或8個字母</p> </div> </div> </div>
截圖工具不顯示刪除的彈框,將就一下吧...
實現(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; } } } <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)頁(view)</option> <option value="media_id">發(fā)送消息(media_id)</option> <option value="miniprogram">打開指定小程序(miniprogram)</option> <option value="click">自定義點擊事件(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">用于消息接口推送,不超過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ù)組對象的修改使用Vue的變異方法參考
- 阻止事件冒泡使用Vue的事件修飾符參考
- 在切換菜單類型會有一些沒有聲明屬性,但vue初始化實例后不會監(jiān)聽沒有聲明的屬性,所以要使用Vue.set方法來將屬性添加到菜單對象上參考
彈窗組件使用的是layer
素材列表使用的模版是art-template
項目地址github
總結(jié)
以上所述是小編給大家介紹的Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(二),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue實現(xiàn)多個echarts根據(jù)屏幕大小變化而變化實例
這篇文章主要介紹了vue實現(xiàn)多個echarts根據(jù)屏幕大小變化而變化實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標簽
這篇文章主要給大家介紹了關(guān)于如何解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標簽的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細,對同樣遇到這個問題的朋友具有一定的參考解決價值,需要的朋友可以參考下2024-05-05vue-electron使用serialport時問題解決方案
這篇文章主要介紹了vue-electron使用serialport時問題解決方案,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09vite2打包的時候vendor-xxx.js文件過大的解決方法
vite2是一個非常好用的工具,只是隨著代碼的增多,打包的時候?vendor-xxxxxx.js?文件也越來越大,本文主要介紹了vite2打包的時候vendor-xxx.js文件過大的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03