SideMenu.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <a-layout-sider
  3. :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
  4. width="200px"
  5. :collapsible="collapsible"
  6. v-model="collapsed"
  7. :trigger="null">
  8. <logo />
  9. <s-menu
  10. :collapsed="collapsed"
  11. :menu="menus"
  12. :theme="theme"
  13. @select="onSelect"
  14. :mode="mode"
  15. :style="smenuStyle">
  16. </s-menu>
  17. </a-layout-sider>
  18. </template>
  19. <script>
  20. import ALayoutSider from "ant-design-vue/es/layout/Sider"
  21. import Logo from '../tools/Logo'
  22. import SMenu from './index'
  23. import { mixin, mixinDevice } from '@/utils/mixin.js'
  24. export default {
  25. name: "SideMenu",
  26. components: { ALayoutSider, Logo, SMenu },
  27. mixins: [mixin, mixinDevice],
  28. props: {
  29. mode: {
  30. type: String,
  31. required: false,
  32. default: 'inline'
  33. },
  34. theme: {
  35. type: String,
  36. required: false,
  37. default: 'dark'
  38. },
  39. collapsible: {
  40. type: Boolean,
  41. required: false,
  42. default: false
  43. },
  44. collapsed: {
  45. type: Boolean,
  46. required: false,
  47. default: false
  48. },
  49. menus: {
  50. type: Array,
  51. required: true
  52. }
  53. },
  54. computed:{
  55. smenuStyle() {
  56. let style = { 'padding': '0' }
  57. if (this.fixSiderbar) {
  58. style['height'] = 'calc(100% - 59px)'
  59. style['overflow'] = 'auto'
  60. style['overflow-x'] = 'hidden'
  61. }
  62. return style
  63. }
  64. },
  65. methods: {
  66. onSelect (obj) {
  67. this.$emit('menuSelect', obj)
  68. }
  69. }
  70. }
  71. </script>
  72. <style lang="less" scoped>
  73. /* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
  74. .sider {
  75. @scrollBarSize: 10px;
  76. ul.ant-menu {
  77. /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  78. &::-webkit-scrollbar {
  79. width: @scrollBarSize;
  80. height: @scrollBarSize;
  81. background-color: transparent;
  82. display: none;
  83. }
  84. & .-o-scrollbar {
  85. display: none;
  86. }
  87. /* 兼容IE */
  88. -ms-overflow-style: none;
  89. -ms-scroll-chaining: chained;
  90. -ms-content-zooming: zoom;
  91. -ms-scroll-rails: none;
  92. -ms-content-zoom-limit-min: 100%;
  93. -ms-content-zoom-limit-max: 500%;
  94. -ms-scroll-snap-type: proximity;
  95. -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  96. /* 定义滚动条轨道 */
  97. &::-webkit-scrollbar-track {
  98. background-color: transparent;
  99. }
  100. /* 定义滑块 */
  101. &::-webkit-scrollbar-thumb {
  102. border-radius: @scrollBarSize;
  103. background-color: #eee;
  104. box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  105. &:hover {
  106. background-color: #dddddd;
  107. }
  108. &:active {
  109. background-color: #bbbbbb;
  110. }
  111. }
  112. }
  113. /** 暗色系滚动条样式 */
  114. &.dark ul.ant-menu {
  115. &::-webkit-scrollbar-thumb {
  116. background-color: #666666;
  117. &:hover {
  118. background-color: #808080;
  119. }
  120. &:active {
  121. background-color: #999999;
  122. }
  123. }
  124. }
  125. }
  126. /* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
  127. </style>
  128. <!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
  129. <style lang="less">
  130. .ant-menu.ant-menu-root {
  131. & > .ant-menu-item:first-child {
  132. background-color: transparent;
  133. & > a, & > a:hover {
  134. color: rgba(0, 0, 0, 0.65);
  135. }
  136. &.ant-menu-item-selected {
  137. & > a, & > a:hover {
  138. color: @primary-color;
  139. }
  140. }
  141. }
  142. &.ant-menu-dark > .ant-menu-item:first-child {
  143. & > a, & > a:hover {
  144. color: rgba(255, 255, 255, 0.65);
  145. }
  146. &.ant-menu-item-selected {
  147. & > a, & > a:hover {
  148. color: rgba(255, 255, 255, 1);
  149. }
  150. }
  151. }
  152. }
  153. </style>
  154. <!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->