SideMenu.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  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: 选中首页的时候不显示背景颜色 -->
  155. <!--侧边栏的选中after显示在左侧 -->
  156. <style lang="less">
  157. ul.ant-menu-inline li.ant-menu-selected::after, ul.ant-menu-vertical li.ant-menu-selected::after,ul.ant-menu-vertical li.ant-menu-item-selected::after,ul.ant-menu-inline li.ant-menu-item-selected::after {
  158. -webkit-transform: scaleY(1);
  159. transform: scaleY(1);
  160. opacity: 1;
  161. -webkit-transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  162. transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  163. transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  164. transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  165. }
  166. .ant-menu-inline li.ant-menu-item::after ,.ant-menu-vertical li.ant-menu-item::after ,.ant-menu-vertical li.ant-menu-item::after{
  167. display: block;
  168. position: absolute;
  169. top: 0;
  170. left: 0px;
  171. right: 0;
  172. bottom: 0;
  173. border-left: 3px solid #1890ff;
  174. border-right: 0px ;
  175. -webkit-transform: scaleY(0.0001);
  176. transform: scaleY(0.0001);
  177. opacity: 0;
  178. -webkit-transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  179. transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  180. transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  181. transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  182. content: '';
  183. }
  184. </style>