iView 的Menu 导航菜单使用小记

最近作一个nuxtjs+IView的门户显示，其中列表的左侧菜单栏最初规划时只有一个级别，因此使用的是<ul><li></li><ul>显示

可是一个级别的左侧菜单知足不了运维的须要，因而须要二级菜单。因而我修改了，原先的代码<ul><li></li><ul>改成<ul><li><ul><li></li><ul></li><ul>的形式。

可是出现个问题测试说要能收起的

简单嘛，直接加个<i></i>图标，而后点击时候就改变图标的样式名就能够了

然鹅不行

 

先看一下大神这么介绍的nuxt

我却是想像使用vue那样双向绑定的，好比改一个标识，而后就能够实现展开收起什么的

点击时候确实实现了标识变动，可是页面彻底没动静

并且我时间很少，与其浪费时间去处理dom,还不如去找一下现成的ui框架

嘿还真有，而且是已经在使用的（很奇怪为何明明已经引入有iView左边菜单仍是使用了原始的li标签。导航菜单组件不香仍是嫌麻烦？）

因而我去找到了iView导航的api

可是太坑了吧！！！

它的例子竟然没有事件啊啊啊！

并且只有二级菜单！！！万一我要用三级怎么办（事实证实……我果真是乌鸦嘴）

 

在我兢兢业业地把组件用进去而且样式改好后。运维说初始化要展开这个菜单才行

我又去看了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  6         v-for="(item) in (menu || [])"
 7  :name="item.menuId" 
 8  v-bind:key="item.menuId"
 9  :class="{childrenNone: !item.children.length}"
10         >
11         <template slot="title">
12             <div class="li-div" @click=jumpCatByid(item) :class="{activeCat: parseInt(item.menuId) === parseInt(cid)}">{{item.menuName}}</div>
13         </template>
14         <template v-for="(el) in (item.children || [])">
15           <Submenu 16               v-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: parseInt(el.menuId) === parseInt(cid)}" @click=jumpCatByid(el) >{{el.menuName}}</div>
24               </template>
25               <MenuItem 26                   v-for="(elIt) in (el.children || [])"
27  v-bind:key="elIt.menuId"
28  :name="elIt.menuId"
29                   >
30               <div class="jw-div100b li-div" @click=jumpCatByid(elIt) :class="{activeCat: parseInt(elIt.menuId) === parseInt(cid)}">{{elIt.menuName}}</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 () {  6     return {  7  children: {},  8  openArr: []  9  } 10  }, 11  watch: { 12     cid : function (newVal) { 13       this.openArr = [] 14       this.initRes(newVal, 0) 15  }, 16     change: function (newVal) { 17       this.openArr = [] 18       this.initRes(this.cid, 0) 19  }, 20  }, 21  props: { 22  cid: { 23  type: Number, 24       default: 1
25  }, 26  change: { 27  type: Number, 28       default: 1
29  } 30  }, 31  computed: { 32  ...mapGetters({ 33       menu: 'list_get_menu', 34       title: 'list_get_title'
35  }) 36  }, 37  created () { 38     this.openArr = [] 39     this.initRes(this.cid, 0) 40  }, 41  methods: { 42  initRes (menuId, tagNum) { 43       this.$store.dispatch('list_get_menu', { 44  menuId: menuId 45       }).then(res =>{ 46         if(res.menuId){ 47           parseInt(res.menuLevel) > 1 && this.initRes(res.parentId, tagNum + 1) 48           this.openArr.push(parseInt(res.parentId)) 49           this.$nextTick(() => { 50             this.$refs.side_menu.updateOpened() 51             this.$refs.side_menu.updateActiveName() 52  }) 53  } 54  }) 55  }, 56  jumpCatByid (item) { 57       this.openArr = [] 58       let id = item.menuId 59       if (id === this.cid) { 60         return false
61  } 62       this.$store.dispatch('list_get_news', { 63  menuId: id, 64         pageNo: 1, 65         pageSize: 10
66       }).then(res => { 67         if (res.total === 1 && ((!item.children) || item.children.length === 0)) { 68           this.$router.push({ 69             path: '/content/' + res.datas[0].id 70  }) 71         } else { 72           this.$router.push({ 73             path: '/list/' + id 74  }) 75  } 76  }) 77  } 78  } 79 } 80 </script>

这点代码搞得我脑袋痛——