suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Schritte zur Implementierung des WeChat-Menüeditors für öffentliche Konten mit Vue.js (Teil 1)

Detaillierte Erläuterung der Schritte zur Implementierung des WeChat-Menüeditors für öffentliche Konten mit Vue.js (Teil 1)

php中世界最好的语言
php中世界最好的语言Original
2018-05-23 10:56:192633Durchsuche

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zum Implementieren des Editors für das Menü des öffentlichen WeChat-Kontos mit Vue.js (Teil 1) und Vorsichtsmaßnahmen für die Implementierung des Editors für das Menü des öffentlichen WeChat-Kontos mit Vue.js

Was sind das? Hier sind tatsächliche Fälle.

Ich beschäftige mich schon seit einiger Zeit mit Vue.js, deshalb möchte ich versuchen, einen Menüeditor wie den auf der WeChat-Plattform zu erstellen. Ich werde ihn hier teilen.

Sehen Sie sich das Projekt Github an für den spezifischen Stilcode

Erstellen Sie eine Vue-Instanz

<!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>

Menüdaten in die Vorlage rendern

v-if und v-for werden zum Rendern von Daten in die Vorlage verwendet. Es gibt jeweils bis zu 3 Hauptmenüs Das Hauptmenü kann bis zu 5 Untermenüs haben. 

<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>

Methode zur Vue-Instanz hinzufügen

Vue-Instanz hinzufügen hinzufügen unsere benutzerdefinierte Methode 

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
 }
 }
}
an das Methodenobjekt, um die Methode an das Menü zu binden

Die selectedMenu-Methode wird ausgelöst, wenn auf das Menü geklickt wird. und die selectedMenu-Methode wird ausgelöst, wenn auf die Schaltfläche „Add addMenu“ geklickt wird. Verwenden Sie v-on, um auf das -Ereignis

zu warten. Die Abkürzung lautet @

, um auf das Klickereignis @click zu warten. Um zu verhindern, dass das Untermenü-Klickereignis das Hauptmenü aufsprudelt, Verwenden Sie den Ereignismodifikator .stop, um Blasenbildung zu verhindern @click.stop

Verwenden Sie v-bind:class, um die Klasse hinzuzufügen, wenn das Umschaltmenü ausgewählt wird. :class ist die Abkürzung für 

<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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Berechnung von Pi auf 100 Dezimalstellen, Implementierungsschritte, detaillierte Erklärung

Vue Axios Produktionsumgebung und Release Detaillierte Erläuterung der Schritte zum Konfigurieren verschiedener Schnittstellenadressen in der Umgebung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung des WeChat-Menüeditors für öffentliche Konten mit Vue.js (Teil 1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Implementierungsschritte zur Berechnung von Pi auf 100 Dezimalstellen mit JSNächster Artikel：Ausführliche Erläuterung der Implementierungsschritte zur Berechnung von Pi auf 100 Dezimalstellen mit JS

In Verbindung stehende Artikel

Mehr sehen