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>

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