iView的Menu导航菜单使⽤⼩记
最近做⼀个nuxtjs+IView的门户显⽰，其中列表的左侧菜单栏最初规划时只有⼀个级别，所以使⽤的是<ul><li></li><ul>显⽰
但是⼀个级别的左侧菜单满⾜不了运维的需要，于是需要⼆级菜单。于是我修改了，原先的代码<ul><li></li><ul>改为<ul><li><ul><li></li> <ul></li><ul>的形式。
但是出现个问题测试说要能收起的
简单嘛，直接加个<i></i>图标，然后点击时候就改变图标的样式名就可以了
然鹅不⾏
我倒是想像使⽤vue那样双向绑定的，⽐如改⼀个标识，然后就可以实现展开收起什么的
点击时候确实实现了标识变更，但是页⾯完全没动静
⽽且我时间不多，与其浪费时间去处理dom，还不如去⼀下现成的ui框架
嘿还真有，并且是已经在使⽤的（很奇怪为什么明明已经引⼊有iView左边菜单还是使⽤了原始的li标签。
导航菜单组件不⾹还是嫌⿇烦？）于是我去到了
但是太坑了吧
它的例⼦居然没有事件啊啊啊！
⽽且只有⼆级菜单万⼀我要⽤三级怎么办（事实证明……我果然是乌鸦嘴）
在我兢兢业业地把组件⽤进去并且样式改好后。运维说初始化要展开这个菜单才⾏
我⼜去看了api
它展开数组居然是写死的！
我这边获取到的数据循环好的数组展开不了
然后我发现了这个
⾏叭
于是我经历各种bug后终于展开了
运维这时⼜要加⼀级菜单……
不说了，直接贴代码
1<template>
2<div class="list-slider">
3<h2><span class="active">{{title}}</span></h2>
4<Menu class="lsiten-cat-list-box" width="180" :active-key="parseInt(cid)" ref="side_menu" :open-names="openArr" accordion>
5<Submenu
6v-for="(item) in (menu || [])"
7        :name="uId"
8        v-bind:key="uId"
9        :class="{childrenNone: !item.children.length}"
10>
11<template slot="title">
12<div class="li-div"  @click=jumpCatByid(item) :class="{activeCat: uId) === parseInt(cid)}">{{uName}}</div>
13</template>
14<template v-for="(el) in (item.children || [])">
15<Submenu
16v-bind:key="el.menuId"
17              :name="el.menuId"
18              class="thirdLv"
19              :class="{childrenNone: !el.children.length}"
20>
21<template slot="title">
22<div class="jw-div100b li-div"
23                  :class="{activeCat: uId) === parseInt(cid)}" @click=jumpCatByid(el) >{{el.menuName}}</div>
24</template>
25<MenuItem
26v-for="(elIt) in (el.children || [])"
27                  v-bind:key="uId"
28                  :name="uId"
29>
30<div class="jw-div100b li-div" @click=jumpCatByid(elIt) :class="{activeCat: uId) === parseInt(cid)}">{{uName}}</div> 31</MenuItem>
32</Submenu >
33</template>
34</Submenu>
35</Menu>
36</div>
37</template>
1 <script>
2 import {mapGetters} from 'vuex'
3 export default {
4  name: 'list-slider',
5  data () {
6return {
7      children: {},
8      openArr: []
9    }
10  },
11  watch: {
12    cid : function (newVal) {
13this.openArr = []
14this.initRes(newVal, 0)
15    },
16    change: function (newVal) {
17this.openArr = []
导航菜单
18this.initRes(this.cid, 0)
19    },
20  },
21  props: {
22    cid: {
23      type: Number,
24default: 1
25    },
26    change: {
27      type: Number,
28default: 1
29    }
30  },
31  computed: {
32    ...mapGetters({
33      menu: 'list_get_menu',
34      title: 'list_get_title'
35    })
36  },
37  created () {
38this.openArr = []
39this.initRes(this.cid, 0)
40  },
41  methods: {
42    initRes (menuId, tagNum) {
43this.$store.dispatch('list_get_menu', {
44        menuId: menuId
45      }).then(res =>{
uId){
47          uLevel) > 1 && this.initRes(res.parentId, tagNum + 1)
48this.openArr.push(parseInt(res.parentId))
49this.$nextTick(() => {
50this.$refs.side_menu.updateOpened()
51this.$refs.side_menu.updateActiveName()
52          })
53        }
54      })
55    },
56    jumpCatByid (item) {
57this.openArr = []
58      let id = uId
59if (id === this.cid) {
60return false
61      }
62this.$store.dispatch('list_get_news', {
63        menuId: id,
64        pageNo: 1,
65        pageSize: 10
66      }).then(res => {
67if (al === 1 && ((!item.children) || item.children.length === 0)) {
68this.$router.push({
69            path: '/content/' + res.datas[0].id
70          })
71        } else {
72this.$router.push({
73            path: '/list/' + id
74          })
75        }
76      })
77    }
78  }
79 }
80 </script>
这点代码搞得我脑壳痛——

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。