Maison > Article > interface Web > Comment utiliser Vue.js pour implémenter l'éditeur de menu de compte public WeChat (idée détaillée)
Comment utiliser Vue.js pour implémenter l'éditeur de menu de compte public WeChat (idée détaillée)
- php中世界最好的语言original
- 2018-05-31 09:44:152283parcourir
Cette fois, je vais vous montrer comment utiliser Vue.js pour implémenter l'éditeur de menu de compte public WeChat (idée détaillée). Quelles sont les précautions à prendre pour utiliser Vue.js pour implémenter l'éditeur de menu de compte public WeChat ? cas pratique, jetons un coup d'oeil Jetez un œil.
J'étudie Vue.js depuis un moment, donc je veux essayer de créer un éditeur de menu comme celui de la plateforme WeChat. Je le partagerai ici
Voir le projet github. pour le code de style spécifique
Créer une instance de 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>
Placez le rendu des données du menu dans le modèle
Ici, v-if et v-for sont utilisés pour rendre les données dans le modèle. jusqu'à 3 menus principaux et chaque menu principal peut avoir jusqu'à 5 sous-menus.
<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>
Ajouter des méthodes à l'instance vue
Ajouter nos méthodes personnalisées à l'objet méthodes dans l'instance vue
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
}
}
}Lier la méthode au menu
Lorsque vous cliquez sur le menu, la méthode selectedMenu est déclenchée et le bouton d'ajout est cliqué pour déclencher le addMenu méthode. Utilisez v-on pour écouter l'événement , son abréviation est @
pour écouter l'événement de clic @click Afin d'empêcher l'événement de clic du sous-menu de remonter dans le menu principal, utilisez le modificateur d'événement .stop Pour éviter les bulles @click.stop
Utilisez v-bind:class pour ajouter la classe lorsque le menu de commutation est sélectionné. :class est l'abréviation
<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>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
Lecture recommandée :
Explication détaillée des étapes pour utiliser la fonction de rappel JS
Accumulation d'algorithmes communs JS, itération , épuisement, Implémentation récursive (avec code)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!