LayoutSider.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <div
  3. v-if="getMenuFixed && !getIsMobile"
  4. :style="getHiddenDomStyle"
  5. :class="{ hidden: !showClassSideBarRef }"
  6. />
  7. <Sider
  8. ref="sideRef"
  9. breakpoint="lg"
  10. collapsible
  11. :class="getSiderClass"
  12. :width="getMenuWidth"
  13. :collapsed="getIsMobile ? false : getCollapsed"
  14. :collapsedWidth="getCollapsedWidth"
  15. :theme="getMenuTheme"
  16. @collapse="onCollapseChange"
  17. @breakpoint="onBreakpointChange"
  18. v-bind="getTriggerAttr"
  19. >
  20. <template #trigger v-if="getShowTrigger">
  21. <LayoutTrigger />
  22. </template>
  23. <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
  24. <DragBar ref="dragBarRef" />
  25. </Sider>
  26. </template>
  27. <script lang="ts">
  28. import { computed, defineComponent, ref, unref, CSSProperties } from 'vue';
  29. import { Layout } from 'ant-design-vue';
  30. import LayoutMenu from '../menu';
  31. import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
  32. import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
  33. import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  34. import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
  35. import { useAppInject } from '/@/hooks/web/useAppInject';
  36. import { useDesign } from '/@/hooks/web/useDesign';
  37. import DragBar from './DragBar.vue';
  38. export default defineComponent({
  39. name: 'LayoutSideBar',
  40. components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
  41. setup() {
  42. const dragBarRef = ref<ElRef>(null);
  43. const sideRef = ref<ElRef>(null);
  44. const {
  45. getCollapsed,
  46. getMenuWidth,
  47. getSplit,
  48. getMenuTheme,
  49. getRealWidth,
  50. getMenuHidden,
  51. getMenuFixed,
  52. getIsMixMode,
  53. } = useMenuSetting();
  54. const { prefixCls } = useDesign('layout-sideBar');
  55. const { getIsMobile } = useAppInject();
  56. const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
  57. useDragLine(sideRef, dragBarRef);
  58. const { getCollapsedWidth, onBreakpointChange, onCollapseChange } = useSiderEvent();
  59. const getMode = computed(() => {
  60. return unref(getSplit) ? MenuModeEnum.INLINE : null;
  61. });
  62. const getSplitType = computed(() => {
  63. return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
  64. });
  65. const showClassSideBarRef = computed(() => {
  66. return unref(getSplit) ? !unref(getMenuHidden) : true;
  67. });
  68. const getSiderClass = computed(() => {
  69. return [
  70. prefixCls,
  71. {
  72. [`${prefixCls}--fixed`]: unref(getMenuFixed),
  73. hidden: !unref(showClassSideBarRef),
  74. [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
  75. },
  76. ];
  77. });
  78. const getHiddenDomStyle = computed(
  79. (): CSSProperties => {
  80. const width = `${unref(getRealWidth)}px`;
  81. return {
  82. width: width,
  83. overflow: 'hidden',
  84. flex: `0 0 ${width}`,
  85. maxWidth: width,
  86. minWidth: width,
  87. transition: 'all 0.2s',
  88. };
  89. }
  90. );
  91. return {
  92. prefixCls,
  93. sideRef,
  94. dragBarRef,
  95. getIsMobile,
  96. getHiddenDomStyle,
  97. getSiderClass,
  98. getTriggerAttr,
  99. getCollapsedWidth,
  100. getMenuFixed,
  101. showClassSideBarRef,
  102. getMenuWidth,
  103. getCollapsed,
  104. getMenuTheme,
  105. onBreakpointChange,
  106. getMode,
  107. getSplitType,
  108. onCollapseChange,
  109. getShowTrigger,
  110. };
  111. },
  112. });
  113. </script>
  114. <style lang="less">
  115. @prefix-cls: ~'@{namespace}-layout-sideBar';
  116. .@{prefix-cls} {
  117. z-index: @layout-sider-fixed-z-index;
  118. &--fixed {
  119. position: fixed;
  120. top: 0;
  121. left: 0;
  122. height: 100%;
  123. }
  124. &--mix {
  125. top: @header-height;
  126. height: calc(100% - @header-height);
  127. }
  128. &.ant-layout-sider-dark {
  129. background: @sider-dark-bg-color;
  130. .ant-layout-sider-trigger {
  131. color: darken(@white, 25%);
  132. background: @trigger-dark-bg-color;
  133. &:hover {
  134. color: @white;
  135. background: @trigger-dark-hover-bg-color;
  136. }
  137. }
  138. }
  139. &:not(.ant-layout-sider-dark) {
  140. // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
  141. .ant-layout-sider-trigger {
  142. color: @text-color-base;
  143. border-top: 1px solid @border-color-light;
  144. }
  145. }
  146. .ant-layout-sider-zero-width-trigger {
  147. top: 40%;
  148. z-index: 10;
  149. }
  150. & .ant-layout-sider-trigger {
  151. height: 36px;
  152. line-height: 36px;
  153. }
  154. }
  155. </style>