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>

這點代碼搞得我腦袋痛——