Vue.js實作微信公眾號選單編輯器步驟詳解（上）
這次帶給大家Vue.js實作微信公眾號選單編輯器步驟詳解（上），Vue.js實作微信公眾號選單編輯器的注意事項有哪些，下面就是實戰案例，一起來看一下。
學習一段時間Vue.js，於是想嘗試著做一個像微信平台裡那樣的選單編輯器，在這裡分享下
具體樣式程式碼查看專案github
建立一個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>
<p class="content" style="width:900px;margin:0 auto;">
<!-- vue实例挂载的DOM元素 -->
<p id="app-menu">
<!-- 菜单预览界面 -->
<p class="weixin-preview"></p>
<!-- 菜单编辑界面 -->
<p class="weixin-menu-detail"></p>
</p>
</p>
<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個子選單。
<p class="weixin-preview">
<p class="weixin-hd">
<p class="weixin-title">{{weixinTitle}}</p>
</p>
<p class="weixin-bd">
<ul class="weixin-menu">
<!-- 这里使用v-for开始循环主菜单 -->
<li v-for="(btn,i) in menu.button" class="menu-item">
<p class="menu-item-title">
<span>{{ btn.name }}</span>
</p>
<ul class="weixin-sub-menu">
<!-- 这里使用v-for开始循环主菜单下的子菜单 -->
<li v-for="(sub,i2) in btn.sub_button" class="menu-sub-item">
<p class="menu-item-title">
<span>{{sub.name}}</span>
</p>
</li>
<!-- 这里使用v-if 判断子菜单小于5个，则添加按钮来添加子菜单 -->
<li v-if="btn.sub_button.length<5" class="menu-sub-item">
<p class="menu-item-title">
<i class="icon14_menu_add"></i>
</p>
</li>
</ul>
</li>
<!-- 这里使用v-if 判断主菜单小于3个，则添加按钮来添加主菜单 -->
<li class="menu-item" v-if="menu.button.length<3"> <i class="icon14_menu_add"></i></li>
</ul>
</p>
</p>
##給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;
}
},
//添加菜单
//参数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
}
}
}事件，它的縮寫是@
監聽點擊事件@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)">
<p class="menu-item-title">
<span>{{ btn.name }}</span>
</p>
<!-- 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)">
<p class="menu-item-title">
<span>{{sub.name}}</span>
</p>
</li>
<li v-if="btn.sub_button.length<5" class="menu-sub-item" @click.stop="addMenu(2)">
<p class="menu-item-title">
<i class="icon14_menu_add"></i>
</p>
</li>
</ul>
</li>
<li class="menu-item" v-if="menu.button.length<3" @click="addMenu(1)">
<i class="icon14_menu_add"></i>
</li>
</ul>
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
以上是Vue.js實作微信公眾號選單編輯器步驟詳解（上）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
C語言程式設計必備軟體：五個推薦給初學者的好幫手
Feb 20, 2024 pm 08:18 PM
C語言作為一門基礎而重要的程式語言，對於初學者來說，選擇合適的程式設計軟體是非常重要的。在市面上有許多不同的C語言程式設計軟體可供選擇，但對於初學者來說，適合自己的選擇可能有些困惑。本文將推薦給初學者的五個C語言程式設計軟體，幫助他們快速入門並提升程式設計能力。 Dev-C++Dev-C++是一款免費開源的整合開發環境（IDE），特別適合初學者使用。它簡單易用，整合了編輯器、
Go語言開發工具介紹：必備工具一覽
Mar 29, 2024 pm 01:06 PM
標題：Go語言開發工具介紹：必備工具一覽在Go語言的開發過程中，使用適當的開發工具可以提高開發效率和程式碼品質。本文將介紹幾款在Go語言開發中常用的必備工具，並附上具體的程式碼範例，讓讀者更直觀地了解它們的使用方法和作用。 1.VisualStudioCodeVisualStudioCode是一款輕量級且功能強大的跨平台開發工具，具有豐富的插件和功能，
Golang編輯器建議：五個適合開發的選擇
Jan 19, 2024 am 09:00 AM
隨著Golang的流行和普及，越來越多的開發者開始使用這門程式語言。然而，和其他流行的程式語言一樣，Golang的開發需要選擇一款適合的編輯器來提高開發效率。在本文中，我們將介紹五個適合Golang開發的編輯器。 VisualStudioCodeVisualStudioCode（簡稱VSCode）是微軟開發的一款免費的跨平台編輯器。它是基於Elect
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
Discuz編輯器：強大的網頁編輯工具
Mar 09, 2024 pm 06:06 PM
Discuz編輯器：強大的網頁編輯工具，需要具體程式碼範例隨著網路的發展，網站建立和內容編輯變得越來越重要。作為常見的網頁編輯工具，Discuz編輯器在網站建置中扮演著重要的角色。它不僅提供了豐富的功能和工具，還能夠幫助使用者更方便地編輯和發佈內容。在本文中，我們將介紹Discuz編輯器的特點和使用方法，並提供一些具體的程式碼範例，來幫助讀者更好地了解和使用
Discuz編輯器：高效率的貼文排版工具
Mar 10, 2024 am 09:42 AM
Discuz編輯器：高效率的貼文排版工具隨著網路的發展，網路論壇已成為人們交流、分享資訊的重要平台。在論壇中，使用者不僅可以發表自己的觀點和想法，還可以與他人進行討論和互動。在進行貼文發表時，一個清晰、美觀的排版格式往往能夠吸引更多的讀者，傳達更準確的訊息。為了方便用戶快速排版編輯帖子，Discuz編輯器應運而生，成為了一款高效的帖子排版工具。 Discu
Win10打不開存取控制編輯器
Jan 03, 2024 pm 10:05 PM
win10無法開啟存取控制編輯器是一個不常見的問題，通常都是在外接硬碟和U盤中才會出現這個問題，其實解決方法非常的簡單，使用安全模式打開看下就行，下面來看看詳細的教程吧。 win10無法開啟存取控制編輯器1.登陸介面中，按住shift，點選按鈕，點選2.--，點選3.重新啟動後，按F5嘗試進入，看看是否能夠進入即可。 win10安全模式相關文章>>>如何進入win10安全模式<<<>>>win10安全模式怎麼修復系統<<<
如何在JavaScript中取得HTTP狀態碼的簡單方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務
