index.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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="false"
  8. :default-active="active"
  9. :background-color="sideMode"
  10. :active-text-color="activeColor"
  11. :text-color="baseColor"
  12. class="el-menu-vertical"
  13. unique-opened
  14. @select="selectMenuItem"
  15. >
  16. <template v-for="item in asyncRouters[0].children">
  17. <aside-component v-if="!item.hidden" :key="item.name" :router-info="item" />
  18. </template>
  19. </el-menu>
  20. </transition>
  21. </el-scrollbar>
  22. </div>
  23. </template>
  24. <script>
  25. import { mapGetters, mapMutations } from 'vuex'
  26. import AsideComponent from '@/view/layout/aside/asideComponent'
  27. import { emitter } from '@/utils/bus.js'
  28. export default {
  29. name: 'Aside',
  30. components: {
  31. AsideComponent
  32. },
  33. data() {
  34. return {
  35. active: '',
  36. isCollapse: false
  37. }
  38. },
  39. computed: {
  40. ...mapGetters('router', ['asyncRouters']),
  41. ...mapGetters('user', ['baseColor', 'activeColor', 'sideMode'])
  42. },
  43. watch: {
  44. $route() {
  45. this.active = this.$route.name
  46. }
  47. },
  48. created() {
  49. this.active = this.$route.name
  50. const screenWidth = document.body.clientWidth
  51. if (screenWidth < 1000) {
  52. this.isCollapse = !this.isCollapse
  53. }
  54. emitter.on('collapse', item => {
  55. this.isCollapse = item
  56. })
  57. },
  58. beforeDestroy() {
  59. emitter.off('collapse')
  60. },
  61. methods: {
  62. ...mapMutations('history', ['addHistory']),
  63. selectMenuItem(index, _, ele) {
  64. const query = {}
  65. const params = {}
  66. ele.route.parameters &&
  67. ele.route.parameters.map(item => {
  68. if (item.type === 'query') {
  69. query[item.key] = item.value
  70. } else {
  71. params[item.key] = item.value
  72. }
  73. })
  74. if (index === this.$route.name) return
  75. if (index.indexOf('http://') > -1 || index.indexOf('https://') > -1) {
  76. window.open(index)
  77. } else {
  78. this.$router.push({ name: index, query, params })
  79. }
  80. }
  81. }
  82. }
  83. </script>
  84. <style lang="scss">
  85. .el-sub-menu__title,.el-menu-item{
  86. i{
  87. color: inherit !important;
  88. }
  89. }
  90. .el-sub-menu__title:hover,.el-menu-item:hover{
  91. i{
  92. color: inherit !important;
  93. }
  94. span{
  95. color: inherit !important;
  96. }
  97. }
  98. .el-scrollbar {
  99. .el-scrollbar__view {
  100. height: 100%;
  101. }
  102. }
  103. .menu-info {
  104. .menu-contorl {
  105. line-height: 52px;
  106. font-size: 20px;
  107. display: table-cell;
  108. vertical-align: middle;
  109. }
  110. }
  111. </style>