VUE组件sidebar开发(侧边栏导航）

回调组件的运用,侧边栏分多级展开，但是只是一个根据传递进来参数来决定侧边栏分几级和有多少项，是一个有着极大自由度的组件，可拓展性很可以。

组件side-bar.vue

<template>
  <div class="x-side-bar">
    <div
      class="item"
      v-for="(item, index) in categoryList"
      :key="index"
    >
      <div class="item-title" @click.stop="isHandleFold(item)">
        <i class="iconfont" :class="item.icon"></i>
        {{item.title}}
        <i v-if="item.children" class="iconfont" :class="arrow"></i>
      </div>
      <div v-if="item.children" class="item-children" v-show="!isFold">
        <side-bar :categoryList="item.children"></side-bar>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'side-bar',
  props: {
    categoryList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      isFold: true,
      arrow: 'icon-arrow-down-bold'
    }
  },
  methods: {
    isHandleFold (item) {
      if (item.children && !item.url) {
        this.isFold = !this.isFold
        this.arrow = (this.isFold ? 'icon-arrow-down-bold' : 'icon-arrow-up-bold')
      } else {
        this.$router.push({ path: item.url })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.x-side-bar {
  width: 220px;
  overflow: hidden;
  background-color: rgb(27, 216, 105);
  .item {
    line-height: 30px;
    text-indent: 10px;
    .item-title {
      font-size: 18px;
      margin-bottom: 2px;
      background-color: rgb(72, 233, 72);
    }
  }
}

.item-title:nth-last {
  margin-bottom: 0;
}
</style>

使用该插件数据sideData.js（想用json格式的自己改，这个只是一个数据例子）

const sideData = {
  title: '侧边栏',
  categoryList: [
    {
      id: '001',
      icon: 'icon-shouye',
      title: '首页   --1级',
      children: [
        {
          id: '005',
          icon: 'icon-wuliu-',
          title: '物流   --2级',
          children: [
            {
              id: '007',
              icon: 'icon-wuliupeisong-',
              title: '物流配送   --3级',
              url: '/home/first/'
            },
            {
              id: '007',
              title: '物流运输   --3级',
              icon: 'icon-wuliupeisong-',
              url: '/home/first/'
            }
          ]
        },
        {
          id: '006',
          icon: 'icon-zhinenghuagongcheng',
          title: '智能化工程  --2级',
          url: '/home/first/'
        }
      ]
    },
    {
      id: '002',
      icon: 'icon-kehuzhongxin01',
      title: '客户中心   --1级',
      url: '/home/first/'
    },
    {
      id: '003',
      icon: 'icon-dingdanzhongxin',
      title: '订单中心   --1级',
      url: '/home/first/'
    },
    {
      id: '004',
      icon: 'icon-xitongguanli',
      title: '系统管理   --1级',
      url: '/home/first/'
    }
  ]
}

export default {
  sideData
}

运用Home.vue

<template>
  <div class="home">
    <h3>Side Bar</h3>
    <side-bar :categoryList="categoryList"/>
  </div>
</template>

<script>
import SideBar from '@/components/side-bar.vue'
import SideData from './sideData.js'

export default {
  name: 'Home',
  components: {
    SideBar
  },
  data () {
    return {
      sideData: SideData.sideData
    }
  },
  computed: {
    categoryList () {
      let list = []
      if (this.sideData && this.sideData.categoryList) {
        list = this.sideData.categoryList
      }
      return list
    }
  }
}
</script>