這次帶給大家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 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>登入後複製
檢查選單名稱輸入長度
用v-model指令在輸入框中綁定選單名，@input監聽輸入事件來檢查輸入的選單名長度，超出上限則顯示提示
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;
}
}登入後複製
新增選單編輯介面和事件監聽
v-model指令用來綁定選單名輸入框的值，@input監聽輸入事件來檢查輸入的選單名稱長度，長度超出上線則顯示提示
<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>
登入後複製
截圖工具不顯示刪除的彈框，將會就一下吧...
##實作選擇選單類型方法
微信選單有多種類型所以需要做個
下拉清單，勾選下拉項目後顯示該項目的內容
先為每個選單新增下類型
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 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>登入後複製
選單的添加、編輯、刪除功能基本上完成了，總結一下學習到的知識
- 數組物件的修改使用Vue的變異方法參考
##阻止事件冒泡使用Vue的事件修飾符參考
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
vue-cli引入、設定axios步驟詳解
vue axios生產環境與發佈環境配置不同介面位址步驟詳解
#
以上是Vue.js實作微信公眾號選單編輯器步驟詳解（下）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
