LayoutSider.vue 4.7 KB

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