Heim > Artikel > Web-Frontend > So verwenden Sie Vue.js, um den Menüeditor für öffentliche WeChat-Konten zu implementieren (detaillierte Idee)

So verwenden Sie Vue.js, um den Menüeditor für öffentliche WeChat-Konten zu implementieren (detaillierte Idee)

php中世界最好的语言Original: 2018-05-31 09:44:152325Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Vue.js zum Implementieren des Menüeditors für öffentliche WeChat-Konten verwenden (detaillierte Idee). Praktischer Koffer, schauen wir mal rein. Schauen Sie mal rein.

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>

Methoden zur Vue-Instanz hinzufügen

Unsere benutzerdefinierten Methoden zum Methodenobjekt in der Vue-Instanz hinzufügen

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

Binden Sie die Methode an das Menü

Wenn auf das Menü geklickt wird, wird die selectedMenu-Methode ausgelöst und auf die Schaltfläche „Hinzufügen“ geklickt, um die addMenu-Methode auszulösen. 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

<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. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung der JS-Rückruffunktion

Akkumulation und Iteration allgemeiner JS-Algorithmen , Erschöpfung, rekursive Implementierung (mit Code)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue.js, um den Menüeditor für öffentliche WeChat-Konten zu implementieren (detaillierte Idee). 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：So berechnen Sie Pi mit JS auf 100 DezimalstellenNächster Artikel：So berechnen Sie Pi mit JS auf 100 Dezimalstellen

In Verbindung stehende Artikel

Mehr sehen