Vue.js로 WeChat 공개 계정 메뉴 편집기를 구현하는 단계에 대한 자세한 설명(1부)-JS 튜토리얼-php.cn

Vue.js로 WeChat 공개 계정 메뉴 편집기를 구현하는 단계에 대한 자세한 설명(1부)

php中世界最好的语言

풀어 주다： 2018-05-23 10:56:19

원래의

2608명이 탐색했습니다.

이번에는 Vue.js로 WeChat 공개 계정 메뉴editor(1부)를 구현하는 단계에 대한 자세한 설명을 가져왔습니다. Vue.js에서 WeChat 공개 계정 메뉴 편집기를 구현해야 하는 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 함께 살펴보겠습니다.

저는 한동안 Vue.js를 공부했기 때문에 WeChat 플랫폼과 같은 메뉴 편집기를 만들어 보고 싶습니다. 여기에서 공유하세요.

특정 스타일 코드는 프로젝트 github에서 확인하세요

만들기 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>

로그인 후 복사

메뉴 데이터를 템플릿으로 렌더링

여기에서는 v-if와 v-for를 사용하여 데이터를 템플릿으로 렌더링합니다. 각 기본 메뉴에는 최대 5개의 하위 메뉴가 있습니다.

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

로그인 후 복사

vue 인스턴스에 메소드 추가

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

로그인 후 복사

메뉴에 메소드 바인딩

메뉴가 다음과 같을 때 selectedMenu 메소드를 트리거하려면 추가 버튼을 클릭하여 addMenu 메소드를 트리거하십시오. v-on을 사용하여 이벤트를 수신합니다. 클릭 이벤트를 수신하려면 @

입니다. @click 하위 메뉴 클릭 이벤트가 메인 메뉴에 버블링되는 것을 방지하려면 .stop 이벤트 수정자를 사용하세요. the bubbling @click.stop

전환 메뉴 선택 시 클래스를 추가하려면 v-bind:class를 사용하세요. :class는 약어입니다

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

로그인 후 복사