Maison > Article > interface Web > Explication détaillée des étapes de mise en œuvre de l'éditeur de menu de compte public WeChat avec Vue.js (Partie 1)
Explication détaillée des étapes de mise en œuvre de l'éditeur de menu de compte public WeChat avec Vue.js (Partie 1)
- php中世界最好的语言original
- 2018-05-23 10:56:192577parcourir
Cette fois, je vous apporte une explication détaillée des étapes pour implémenter l'éditeur de menu de compte public WeChat avec Vue.js (Partie 1), précautions pour implémenter l'éditeur de menu de compte public WeChat avec Vue.js Qu'est-ce que c'est ? Voici des cas réels.
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 une méthode à l'instance vue
dans l'instance vue Ajoutez notre méthode personnalisée
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
}
}
}à l'objet méthodes et liez la méthode au menu
Lorsque vous cliquez sur le menu, le menu sélectionné La méthode est déclenchée. Cliquez sur le bouton Ajouter pour déclencher la méthode addMenu. 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 de
<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 PHP chinois !
Lecture recommandée :
Calcul JS de pi à 100 décimales étapes de mise en œuvre explication détaillée
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript