Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(一)
學(xué)習(xí)一段時間Vue.js,于是想嘗試著做一個像微信平臺里那樣的菜單編輯器,在這里分享下
具體樣式代碼查看項目github
創(chuàng)建一個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"> <!-- 菜單預(yù)覽界面 --> <div class="weixin-preview"></div> <!-- 菜單編輯界面 --> <div class="weixin-menu-detail"></div> </div> </div> <script> var app = new Vue({ el: '#app-menu',//掛載到對應(yīng)的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>
將菜單數(shù)據(jù)渲染到模版上
這里使用v-if和v-for將數(shù)據(jù)渲染到模版上,最多會有3個主菜單以及每個主菜單最多會有5個子菜單。
<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開始循環(huán)主菜單 --> <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開始循環(huán)主菜單下的子菜單 --> <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對象中添加我們自定義的方法
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; } }, //添加菜單 //參數(shù)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 } } }
給菜單綁定方法
當點擊菜單觸發(fā)selectedMenu方法,點擊添加按鈕觸發(fā)添加addMenu方法。使用v-on來監(jiān)聽事件,它的縮寫是@
監(jiān)聽點擊事件@click ,為了防止子菜單點擊事件冒泡的主菜單,則使用.stop事件修飾符來阻止冒泡@click.stop
使用v-bind:class來添加切換菜單選中時的class。:class為縮寫
<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>
下篇給大家介紹 Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(二)
總結(jié)
以上所述是小編給大家介紹的Vue.js 實現(xiàn)微信公眾號菜單編輯器功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue2.0基于vue-cli+webpack父子組件通信(實例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09vue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析,技術(shù)點較多,所以篇幅較長,認真閱覽的你一定會學(xué)到很多知識,需要的朋友可以參考下2022-09-09教你使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏
這篇文章主要為大家介紹了使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05VUE3?Vite打包后動態(tài)圖片資源不顯示問題解決方法
這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動態(tài)圖片資源不顯示問題的解決方法,可能是因為在部署后的服務(wù)器環(huán)境中對中文文件名的支持不完善,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09