微信公众号菜单html5,Vue.js 实现微信公众号菜单编辑器功能(一)
學習一段時間Vue.js，于是想嘗試著做一個像微信平臺里那樣的菜單編輯器，在這里分享下
具體樣式代碼查看項目github
創(chuàng)建一個vue實例
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: {
}
})
將菜單數(shù)據(jù)渲染到模版上
這里使用v-if和v-for將數(shù)據(jù)渲染到模版上，最多會有3個主菜單以及每個主菜單最多會有5個子菜單。
{{weixinTitle}}給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為縮寫
下篇給大家介紹? Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(二)
總結
以上所述是小編給大家介紹的Vue.js 實現(xiàn)微信公眾號菜單編輯器功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
總結
以上是生活随笔為你收集整理的微信公众号菜单html5,Vue.js 实现微信公众号菜单编辑器功能(一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： n维椭球体积公式_【“数”你好看】点到直
- 下一篇： Kodak Preps 8 for Ma