這次帶給大家Vue.js實作微信公眾號選單編輯器步驟詳解(上),Vue.js實作微信公眾號選單編輯器的注意事項有哪些,下面就是實戰案例,一起來看一下。
學習一段時間Vue.js,於是想嘗試著做一個像微信平台裡那樣的選單編輯器,在這裡分享下
具體樣式程式碼查看專案github
建立一個vue實例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!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' ,
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個子選單。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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物件中新增我們自訂的方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 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;
}
},
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來監聽
事件,它的縮寫是@
監聽點擊事件@click ,為了防止子選單點擊事件冒泡的主選單,則使用.stop事件修飾符來阻止冒泡@click.stop
使用v-bind:class來新增切換選單選取時的class。 :class為縮寫
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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中文網其它相關文章!
推薦閱讀:
JS計算圓周率到小數點後100位元實作步驟詳解
############vue axios生產環境與發布環境配置不同介面位址步驟詳解#########
以上是Vue.js實作微信公眾號選單編輯器步驟詳解(上)的詳細內容。更多資訊請關注PHP中文網其他相關文章!