LayoutSider.vue 4.7 KB

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