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后終於展開了

 運維這時又要加一級菜單……

不說了，直接貼代碼

<template>
  <div class="list-slider">
    <h2><span class="active">{{title}}</span></h2>
    <Menu class="lsiten-cat-list-box" width="180" :active-key="parseInt(cid)" ref="side_menu" :open-names="openArr" accordion>
      <Submenu 
        v-for="(item) in (menu || [])"
        :name="item.menuId" 
        v-bind:key="item.menuId"
        :class="{childrenNone: !item.children.length}"
        >
        <template slot="title">
            <div class="li-div"  @click=jumpCatByid(item) :class="{activeCat: parseInt(item.menuId) === parseInt(cid)}">{{item.menuName}}</div>
        </template>
        <template v-for="(el) in (item.children || [])">
          <Submenu 
              v-bind:key="el.menuId"
              :name="el.menuId"
              class="thirdLv"
              :class="{childrenNone: !el.children.length}"
              >
              <template slot="title">
                <div class="jw-div100b li-div"
                  :class="{activeCat: parseInt(el.menuId) === parseInt(cid)}" @click=jumpCatByid(el) >{{el.menuName}}</div>
              </template>
              <MenuItem
                  v-for="(elIt) in (el.children || [])"
                  v-bind:key="elIt.menuId"
                  :name="elIt.menuId"
                  >
              <div class="jw-div100b li-div" @click=jumpCatByid(elIt) :class="{activeCat: parseInt(elIt.menuId) === parseInt(cid)}">{{elIt.menuName}}</div>
            </MenuItem>
          </Submenu >
        </template>
      </Submenu>
    </Menu>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'list-slider',
  data () {
    return {
      children: {},
      openArr: []
    }
  },
  watch: {
    cid : function (newVal) {
      this.openArr = []
      this.initRes(newVal, 0)
    },
    change: function (newVal) {
      this.openArr = []
      this.initRes(this.cid, 0)
    },
  },
  props: {
    cid: {
      type: Number,
      default: 1
    },
    change: {
      type: Number,
      default: 1
    }
  },
  computed: {
    ...mapGetters({
      menu: 'list_get_menu',
      title: 'list_get_title'
    })
  },
  created () {
    this.openArr = []
    this.initRes(this.cid, 0)
  },
  methods: {
    initRes (menuId, tagNum) {
      this.$store.dispatch('list_get_menu', {
        menuId: menuId
      }).then(res =>{
        if(res.menuId){
          parseInt(res.menuLevel) > 1 && this.initRes(res.parentId, tagNum + 1)
          this.openArr.push(parseInt(res.parentId))
          this.$nextTick(() => {
            this.$refs.side_menu.updateOpened()
            this.$refs.side_menu.updateActiveName()
          })
        }
      })
    },
    jumpCatByid (item) {
      this.openArr = []
      let id = item.menuId
      if (id === this.cid) {
        return false
      }
      this.$store.dispatch('list_get_news', {
        menuId: id,
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        if (res.total === 1 && ((!item.children) || item.children.length === 0)) {
          this.$router.push({
            path: '/content/' + res.datas[0].id
          })
        } else {
          this.$router.push({
            path: '/list/' + id
          })
        }
      })
    }
  }
}
</script>

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