Vue.js學習 — 微信公衆號菜單編輯器(一)

時間 2019-11-17

標籤 vue.js vue 學習微信公衆號菜單編輯器欄目 JavaScript 简体版

原文原文鏈接

學習裏一段時間Vue.js，因而想嘗試着作一個像微信平臺裏那樣的菜單編輯器，在這裏分享下javascript

具體樣式代碼查看項目githubcss

建立一個vue實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
</head>
<body>
    <div class="content" style="width:900px;margin:0 auto;">
        <!-- vue實例掛載的DOM元素 -->
        <div id="app-menu">
            <!-- 菜單預覽界面 -->
            <div class="weixin-preview"></div>
            <!-- 菜單編輯界面 -->
            <div class="weixin-menu-detail"></div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app-menu',//掛載到對應的DOM元素
            data: {
                weixinTitle: 'Vue.js公衆號菜單',
                //菜單對象
                menu: {
                    "button": [
                        {
                            "name": "主菜單1",
                            "sub_button": []
                        },
                        {
                            "name": "主菜單2",
                            "sub_button": []
                        },
                        {
                            "name": "主菜單3",
                            "sub_button": [
                            {
                                "name": "子菜單1"
                            }]
                        }]
                },
                selectedMenuIndex:'',//當前選中菜單索引
                selectedSubMenuIndex:'',//當前選中子菜單索引
            },
            methods: {
            }
        })
    </script>
</body>
</html>

將菜單數據渲染到模版上

這裏使用v-if和v-for將數據渲染到模版上，最多會有3個主菜單以及每一個主菜單最多會有5個子菜單。html

<div class="weixin-preview">
    <div class="weixin-hd">
        <div class="weixin-title">{{weixinTitle}}</div>
    </div>
    <div class="weixin-bd">
        <ul class="weixin-menu">
            <!-- 這裏使用v-for開始循環主菜單 -->
            <li v-for="(btn,i) in menu.button" class="menu-item">
                <div class="menu-item-title">
                    <span>{{ btn.name }}</span>
                </div>
                <ul class="weixin-sub-menu">
                    <!-- 這裏使用v-for開始循環主菜單下的子菜單 -->
                    <li v-for="(sub,i2) in btn.sub_button" class="menu-sub-item">
                        <div class="menu-item-title">
                            <span>{{sub.name}}</span>
                        </div>
                    </li>
                    <!-- 這裏使用v-if 判斷子菜單小於5個，則添加按鈕來添加子菜單 -->
                    <li v-if="btn.sub_button.length<5" class="menu-sub-item">
                        <div class="menu-item-title">
                            <i class="icon14_menu_add"></i>
                        </div>
                    </li>
                </ul>
            </li>
            <!-- 這裏使用v-if 判斷主菜單小於3個，則添加按鈕來添加主菜單 -->
            <li class="menu-item" v-if="menu.button.length<3"> <i class="icon14_menu_add"></i></li>
        </ul>
    </div>
</div>

給vue實例添加方法

在vue實例中給methods對象中添加咱們自定義的方法vue

methods: {
    //選中主菜單
    selectedMenu:function (i) {
        this.selectedSubMenuIndex = ''
        this.selectedMenuIndex = i
    },
    //選中子菜單
    selectedSubMenu:function (i) {
        this.selectedSubMenuIndex = i
    },
    //選中菜單級別
    selectedMenuLevel: function () {
        if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex === '') {
            //主菜單
            return 1;
        } else if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex !== '') {
            //子菜單
            return 2;
        } else {
            //未選中任何菜單
            return 0;
        }
    },
    //添加菜單 
    //參數level爲菜單級別，1爲主菜單、2爲子菜單
    addMenu:function (level) {
        if (level == 1 && this.menu.button.length < 3) {
            this.menu.button.push({"name": "菜單名稱",
                "sub_button": []
            })
            this.selectedMenuIndex = this.menu.button.length - 1
            this.selectedSubMenuIndex = ''
        }
        if (level == 2 && this.menu.button[this.selectedMenuIndex].sub_button.length < 5) {
            this.menu.button[this.selectedMenuIndex].sub_button.push({
                "name": "子菜單名稱"
            })
            this.selectedSubMenuIndex = this.menu.button[this.selectedMenuIndex].sub_button.length - 1
        }
    }
}

給菜單綁定方法

當點擊菜單觸發selectedMenu方法，點擊添加按鈕觸發添加addMenu方法。使用v-on來監聽事件，它的縮寫是@java

監聽點擊事件@click ，爲了防止子菜單點擊事件冒泡的主菜單，則使用.stop事件修飾符來阻止冒泡@click.stopgit

使用v-bind:class來添加切換菜單選中時的class。:class爲縮寫github

<ul class="weixin-menu" id="weixin-menu" >
    <!--  判斷若是selectedMenuIndex是當前點擊的主菜單索引則添加current樣式  -->
    <li v-for="(btn,i) in menu.button" class="menu-item" :class="{current:selectedMenuIndex===i&&selectedMenuLevel()==1}" @click="selectedMenu(i)">
        <div class="menu-item-title">
            <span>{{ btn.name }}</span>
       </div>
        <!--  v-show來切換是否顯示 這裏若是選中了主菜單則子菜單彈出  -->
        <ul class="weixin-sub-menu" v-show="selectedMenuIndex===i">
            <li v-for="(sub,i2) in btn.sub_button" class="menu-sub-item" :class="{current:selectedSubMenuIndex===i2&&selectedMenuLevel()==2}"  @click.stop="selectedSubMenu(i2)">
                <div class="menu-item-title">
                    <span>{{sub.name}}</span>
                </div>
            </li>
            <li v-if="btn.sub_button.length<5" class="menu-sub-item" @click.stop="addMenu(2)">
                 <div class="menu-item-title">
                        <i class="icon14_menu_add"></i>
                 </div>
            </li>
        </ul>
    </li>
    <li class="menu-item" v-if="menu.button.length<3" @click="addMenu(1)">
        <i class="icon14_menu_add"></i>
    </li>
</ul>