recherche

Maison >interface Web >js tutoriel >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中世界最好的语言
php中世界最好的语言original
2018-05-23 10:56:192635parcourir

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 = &#39;&#39;
 }
 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

environnement de production vue axios et release Explication détaillée des étapes de configuration des différentes adresses d'interface dans l'environnement

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des étapes de mise en œuvre pour calculer pi à 100 décimales à l'aide de JSArticle suivant：Explication détaillée des étapes de mise en œuvre pour calculer pi à 100 décimales à l'aide de JS

Articles Liés

Voir plus