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

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

<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監聽輸入事件來檢查輸入的菜單名長度，超出上限則顯示提示

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監聽輸入事件來檢查輸入的菜單名長度，長度超出上線則顯示提示

<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">字數超過上限</p>
            <p class="menu-tips">字數不超過4個漢字或8個字母</p>
        </div>
    </div>
</div>

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

實現選擇菜單類型方法

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

先給每個菜單添加下類型

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;
        }
    }
}

<div class="weixin-menu-detail">
    <div class="menu-input-group">
        <div class="menu-label">菜單內容</div>
        <div 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>
        </div>
    </div>
    <!-- 由於內容類型很多，就以click類型為例 -->
    <div class="menu-content" v-if="selectedMenuType()==3">
        <div class="menu-input-group">
            <p class="menu-tips">用於消息接口推送，不超過128字節</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>

---

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

• 數組對象的修改使用Vue的變異方法參考
• 阻止事件冒泡使用Vue的事件修飾符參考
• 在切換菜單類型會有一些沒有聲明屬性，但vue初始化實例后不會監聽沒有聲明的屬性，所以要使用Vue.set方法來將屬性添加到菜單對象上參考

彈窗組件使用的是layer

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

項目地址github