Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(一)
學(xué)習(xí)一段時(shí)間Vue.js,于是想嘗試著做一個(gè)像微信平臺(tái)里那樣的菜單編輯器,在這里分享下
具體樣式代碼查看項(xiàng)目github
創(chuàng)建一個(gè)vue實(shí)例
<!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實(shí)例掛載的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',//掛載到對(duì)應(yīng)的DOM元素 data: { weixinTitle: 'Vue.js公眾號(hào)菜單', //菜單對(duì)象 menu: { "button": [ { "name": "主菜單1", "sub_button": [] }, { "name": "主菜單2", "sub_button": [] }, { "name": "主菜單3", "sub_button": [ { "name": "子菜單1" }] }] }, selectedMenuIndex:'',//當(dāng)前選中菜單索引 selectedSubMenuIndex:'',//當(dāng)前選中子菜單索引 }, methods: { } }) </script> </body> </html>
將菜單數(shù)據(jù)渲染到模版上
這里使用v-if和v-for將數(shù)據(jù)渲染到模版上,最多會(huì)有3個(gè)主菜單以及每個(gè)主菜單最多會(huì)有5個(gè)子菜單。
<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個(gè),則添加按鈕來添加子菜單 --> <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個(gè),則添加按鈕來添加主菜單 --> <li class="menu-item" v-if="menu.button.length<3"> <i class="icon14_menu_add"></i></li> </ul> </div> </div>
給vue實(shí)例添加方法
在vue實(shí)例中給methods對(duì)象中添加我們自定義的方法
methods: { //選中主菜單 selectedMenu:function (i) { this.selectedSubMenuIndex = '' this.selectedMenuIndex = i }, //選中子菜單 selectedSubMenu:function (i) { this.selectedSubMenuIndex = i }, //選中菜單級(jí)別 selectedMenuLevel: function () { if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex === '') { //主菜單 return 1; } else if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex !== '') { //子菜單 return 2; } else { //未選中任何菜單 return 0; } }, //添加菜單 //參數(shù)level為菜單級(jí)別,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 } } }
給菜單綁定方法
當(dāng)點(diǎn)擊菜單觸發(fā)selectedMenu方法,點(diǎn)擊添加按鈕觸發(fā)添加addMenu方法。使用v-on來監(jiān)聽事件,它的縮寫是@
監(jiān)聽點(diǎn)擊事件@click ,為了防止子菜單點(diǎn)擊事件冒泡的主菜單,則使用.stop事件修飾符來阻止冒泡@click.stop
使用v-bind:class來添加切換菜單選中時(shí)的class。:class為縮寫
<ul class="weixin-menu" id="weixin-menu" > <!-- 判斷如果selectedMenuIndex是當(dāng)前點(diǎn)擊的主菜單索引則添加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 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(二)
總結(jié)
以上所述是小編給大家介紹的Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Vue微信公眾號(hào)網(wǎng)頁分享的示例代碼
- 使用vue完成微信公眾號(hào)網(wǎng)頁小記(推薦)
- 使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序的實(shí)現(xiàn)代碼
- Vue開發(fā)Html5微信公眾號(hào)的步驟
- vue中使用微信公眾號(hào)js-sdk踩坑記錄
- vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)及遇到的坑
- Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(二)
- vue 做移動(dòng)端微信公眾號(hào)采坑經(jīng)驗(yàn)記錄
- 詳解Vue微信公眾號(hào)開發(fā)踩坑全記錄
- 巧用Vue.js+Vuex制作專門收藏微信公眾號(hào)的app
- 如何使用vue開發(fā)公眾號(hào)網(wǎng)頁
相關(guān)文章
Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09vue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載,iview是全局注入,基本使用原先的類名進(jìn)行二次創(chuàng)建公共組件,修改基礎(chǔ)js實(shí)現(xiàn)邏輯,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08vue雙向數(shù)據(jù)綁定知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定的原理以及知識(shí)點(diǎn)總結(jié),并做了代碼實(shí)例分析,有需要的朋友參考下。2018-04-04vue項(xiàng)目中使用require.context引入組件
本文主要介紹了vue項(xiàng)目中使用require.context引入組件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析,技術(shù)點(diǎn)較多,所以篇幅較長(zhǎng),認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí),需要的朋友可以參考下2022-09-09教你使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏
這篇文章主要為大家介紹了使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問題解決方法
這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問題的解決方法,可能是因?yàn)樵诓渴鸷蟮姆?wù)器環(huán)境中對(duì)中文文件名的支持不完善,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09