SideMenu.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <a-layout-sider
  3. :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
  4. width="160px"
  5. :collapsible="collapsible"
  6. v-model="collapsed"
  7. :trigger="null">
  8. <vue-scroll :ops="ops" style="width:100%;height:100%">
  9. <logo />
  10. <s-menu
  11. :collapsed="collapsed"
  12. :menu="menus"
  13. :theme="theme"
  14. :mode="mode"
  15. @select="onSelect"
  16. style="padding: 10px 0px;"></s-menu>
  17. </vue-scroll>
  18. </a-layout-sider>
  19. </template>
  20. <script>
  21. import Logo from '@/components/tools/Logo'
  22. import SMenu from './index'
  23. import { mixin, mixinDevice } from '@/utils/mixin'
  24. export default {
  25. name: 'SideMenu',
  26. components: { 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. data () {
  55. return {
  56. ops: {
  57. vuescroll: {},
  58. scrollPanel: {},
  59. rail: {
  60. keepShow: true
  61. },
  62. bar: {
  63. hoverStyle: true,
  64. onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
  65. background: this.navTheme == 'dark' ? '#00557f' : '#9d9d9d', // 滚动条颜色
  66. opacity: 0.5, // 滚动条透明度
  67. 'overflow-x': 'hidden'
  68. }
  69. }
  70. }
  71. },
  72. methods: {
  73. onSelect (obj) {
  74. this.$emit('menuSelect', obj)
  75. }
  76. }
  77. }
  78. </script>
  79. <style lang="less">
  80. /deep/.__bar-is-vertical {
  81. right: -1px !important;
  82. }
  83. /deep/.__bar-is-horizontal {
  84. display: none !important;
  85. }
  86. </style>