<template>
<div>
<el-menu router :default-active="defaultActive" :class="[$style.menu]">
  <el-submenu index="components">
    <template slot="title">
      <i class="el-icon-suitcase"></i>
      <span>组件</span>
    </template>
    <el-menu-item :index="'/components/' + row.name" v-for="row in components" :key="row.name">{{row.name}}  {{row.label}}</el-menu-item>
  </el-submenu>
</el-menu>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import components from '@/config/components'
@Component
export default class Asider extends Vue {
  components = components

  get defaultActive () {
    return this.$route.path
  }
}
</script>

<style lang="scss" module>
.menu {
  min-height: calc(100vh - 60px);
}
</style>
