首頁 > web前端 > js教程 > Vue.js實作微信公眾號選單編輯器步驟詳解(上)

Vue.js實作微信公眾號選單編輯器步驟詳解(上)

php中世界最好的语言
發布: 2018-05-23 10:56:19
原創
2681 人瀏覽過

這次帶給大家Vue.js實作微信公眾號選單編輯器步驟詳解(上),Vue.js實作微信公眾號選單編輯器的注意事項有哪些,下面就是實戰案例,一起來看一下。

學習一段時間Vue.js,於是想嘗試著做一個像微信平台裡那樣的選單編輯器,在這裡分享下

具體樣式程式碼查看專案github

建立一個vue實例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<!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將資料渲染到模版上,最多會有3個主選單以及每個主選單最多會有5個子選單。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<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實例中給methods物件中新增我們自訂的方法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

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事件修飾符來阻止冒泡@click.stop

使用v-bind:class來新增切換選單選取時的class。 :class為縮寫

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

登入後複製


相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:
JS計算圓周率到小數點後100位元實作步驟詳解

############vue axios生產環境與發布環境配置不同介面位址步驟詳解#########

以上是Vue.js實作微信公眾號選單編輯器步驟詳解(上)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
怎麼實作 JavaScript點與圓的位置關係
來自於 1970-01-01 08:00:00
0
0
0
JavaScript鉤子函數是什麼?
來自於 1970-01-01 08:00:00
0
0
0
c++ 呼叫javascript
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板