index.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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. :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. export default {
  28. name: 'Aside',
  29. components: {
  30. AsideComponent
  31. },
  32. data() {
  33. return {
  34. active: '',
  35. isCollapse: false
  36. }
  37. },
  38. computed: {
  39. ...mapGetters('router', ['asyncRouters']),
  40. ...mapGetters('user', ['baseColor', 'activeColor', 'sideMode'])
  41. },
  42. watch: {
  43. $route() {
  44. this.active = this.$route.name
  45. }
  46. },
  47. created() {
  48. this.active = this.$route.name
  49. const 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. beforeDestroy() {
  58. this.$bus.off('collapse')
  59. },
  60. methods: {
  61. ...mapMutations('history', ['addHistory']),
  62. selectMenuItem(index, _, ele) {
  63. const query = {}
  64. const params = {}
  65. ele.route.parameters &&
  66. ele.route.parameters.map(item => {
  67. if (item.type === 'query') {
  68. query[item.key] = item.value
  69. } else {
  70. params[item.key] = item.value
  71. }
  72. })
  73. if (index === this.$route.name) return
  74. if (index.indexOf('http://') > -1 || index.indexOf('https://') > -1) {
  75. window.open(index)
  76. } else {
  77. this.$router.push({ name: index, query, params })
  78. }
  79. }
  80. }
  81. }
  82. </script>
  83. <style lang="scss">
  84. .el-submenu__title,.el-menu-item{
  85. i{
  86. color: inherit !important;
  87. }
  88. }
  89. .el-scrollbar {
  90. .el-scrollbar__view {
  91. height: 100%;
  92. }
  93. }
  94. .menu-info {
  95. .menu-contorl {
  96. line-height: 52px;
  97. font-size: 20px;
  98. display: table-cell;
  99. vertical-align: middle;
  100. }
  101. }
  102. </style>