index.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <div>
  3. <el-scrollbar style="height:calc(100vh - 64px)">
  4. <transition :duration="{ enter: 800, leave: 100 }" mode="out-in" name="el-fade-in-linear">
  5. <el-menu
  6. :collapse="isCollapse"
  7. :collapse-transition="true"
  8. :default-active="active"
  9. @select="selectMenuItem"
  10. active-text-color="#fff"
  11. class="el-menu-vertical"
  12. text-color="rgb(191, 203, 217)"
  13. unique-opened
  14. >
  15. <template v-for="item in asyncRouters[0].children">
  16. <aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
  17. </template>
  18. </el-menu>
  19. </transition>
  20. </el-scrollbar>
  21. </div>
  22. </template>
  23. <script>
  24. import { mapGetters, mapMutations } from 'vuex'
  25. import AsideComponent from '@/view/layout/aside/asideComponent'
  26. export default {
  27. name: 'Aside',
  28. data() {
  29. return {
  30. active: '',
  31. isCollapse: false
  32. }
  33. },
  34. methods: {
  35. ...mapMutations('history', ['addHistory']),
  36. selectMenuItem(index) {
  37. if (index === this.$route.name) return
  38. this.$router.push({ name: index })
  39. }
  40. },
  41. computed: {
  42. ...mapGetters('router', ['asyncRouters'])
  43. },
  44. components: {
  45. AsideComponent
  46. },
  47. created() {
  48. this.active = this.$route.name
  49. let screenWidth = document.body.clientWidth
  50. if (screenWidth < 1000) {
  51. this.isCollapse = !this.isCollapse
  52. }
  53. this.$bus.on('collapse', item => {
  54. this.isCollapse = item
  55. })
  56. },
  57. watch: {
  58. $route() {
  59. this.active = this.$route.name
  60. }
  61. },
  62. beforeDestroy() {
  63. this.$bus.off('collapse')
  64. }
  65. }
  66. </script>
  67. <style lang="scss">
  68. .el-scrollbar {
  69. .el-scrollbar__view {
  70. height: 100%;
  71. }
  72. }
  73. .menu-info {
  74. .menu-contorl {
  75. line-height: 52px;
  76. font-size: 20px;
  77. display: table-cell;
  78. vertical-align: middle;
  79. }
  80. }
  81. </style>