fix(layout): adjust aside class to be compatible with nested

vexip-ui · Jun 1, 2023 · 88fc9c0 · 88fc9c0
1 parent f522626
commit 88fc9c0
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 31 deletions.
diff --git a/components/layout/layout-aside.tsx b/components/layout/layout-aside.tsx
@@ -35,7 +35,8 @@ export default defineComponent({
       menuProps: null,
       logo: '',
       signName: '',
-      fixed: 'lg'
+      fixed: 'lg',
+      signType: 'aside'
     })
 
     const nh = useNameHelper('layout')
@@ -60,7 +61,8 @@ export default defineComponent({
           [nh.bem('aside', 'inherit')]: layoutState.isLayout || props.inherit,
           [nh.bem('aside', 'fixed')]: matched.value,
           [nh.bem('aside', 'expanded')]: currentExpanded.value,
-          [nh.bem('aside', 'reduced')]: currentReduced.value
+          [nh.bem('aside', 'reduced')]: currentReduced.value,
+          [nh.bem('aside', 'no-sign')]: props.signType !== 'aside'
         }
       ]
     })

diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
@@ -367,6 +367,7 @@ export default defineComponent({
               ref={aside}
               v-model:expanded={asideExpanded.value}
               v-model:reduced={asideReduced.value}
+              sign-type={currentSignType.value}
               menus={props.menus}
               menu-props={props.menuProps}
               fixed={props.asideFixed}

diff --git a/components/layout/props.ts b/components/layout/props.ts
@@ -61,6 +61,7 @@ export const layoutAsideProps = buildProps({
   logo: String,
   signName: String,
   fixed: booleanStringProp,
+  signType: String as PropType<LayoutSignType>,
   onExpandedChange: eventProp<(expanded: boolean) => void>(),
   onReducedChange: eventProp<(reduced: boolean) => void>(),
   onSignClick: eventProp<(event: MouseEvent) => void>(),

diff --git a/docs/en-US/component/layout.md b/docs/en-US/component/layout.md
@@ -265,16 +265,17 @@ interface LayoutHeaderSlotParams extends LayoutSlotParams {
 
 ### LayoutAside Props
 
-| Name       | Type              | Description                                                                                                                     | Default | Since |
-| ---------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | ----- |
-| tag        | `string`          | Set the rendered tag                                                                                                            | `aside` | -     |
-| expanded   | `boolean`         | When the aside is not fixed, set whether the aside is expanded, can use `v-model` two-way binding                               | `false` | -     |
-| reduced    | `boolean`         | Set whether the aside is reduced, can use `v-model` two-way binding                                                             | `false` | -     |
-| menus      | `MenuOptions[]`   | Set menu options                                                                                                                | `[]`    | -     |
-| menu-props | `LayoutMenuProps` | Set menu properties                                                                                                             | `null`  | -     |
-| logo       | `string`          | Set Logo image address                                                                                                          | `''`    | -     |
-| sign-name  | `string`          | Set the sign                                                                                                                    | `''`    | -     |
-| fixed      | `string`          | Set whether the aside is fixed, you can pass a breakpoint or media query string, and it will be fixed when the query is matched | `'lg'`  | -     |
+| Name       | Type                  | Description                                                                                                                     | Default   | Since    |
+| ---------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------- | -------- |
+| tag        | `string`              | Set the rendered tag                                                                                                            | `aside`   | -        |
+| expanded   | `boolean`             | When the aside is not fixed, set whether the aside is expanded, can use `v-model` two-way binding                               | `false`   | -        |
+| reduced    | `boolean`             | Set whether the aside is reduced, can use `v-model` two-way binding                                                             | `false`   | -        |
+| menus      | `MenuOptions[]`       | Set menu options                                                                                                                | `[]`      | -        |
+| menu-props | `LayoutMenuProps`     | Set menu properties                                                                                                             | `null`    | -        |
+| logo       | `string`              | Set Logo image address                                                                                                          | `''`      | -        |
+| sign-name  | `string`              | Set the sign                                                                                                                    | `''`      | -        |
+| fixed      | `string`              | Set whether the aside is fixed, you can pass a breakpoint or media query string, and it will be fixed when the query is matched | `'lg'`    | -        |
+| sign-type  | `'aside' \| 'header'` | Set the block where the sign is located, aside top will be adjusted if it's not equal to `'aside'`                              | `'aside'` | `2.1.23` |
 
 ### LayoutAside Events
 

diff --git a/docs/zh-CN/component/layout.md b/docs/zh-CN/component/layout.md
@@ -265,16 +265,17 @@ interface LayoutHeaderSlotParams extends LayoutSlotParams {
 
 ### LayoutAside 属性
 
-| 名称       | 类型              | 说明                                                                     | 默认值  | 始于 |
-| ---------- | ----------------- | ------------------------------------------------------------------------ | ------- | ---- |
-| tag        | `string`          | 设置渲染的标签                                                           | `aside` | -    |
-| expanded   | `boolean`         | 当边栏不固定时，设置边栏是否为展开状态，可以使用 `v-model` 双向绑定      | `false` | -    |
-| reduced    | `boolean`         | 设置边栏是否为缩小状态，可以使用 `v-model` 双向绑定                      | `false` | -    |
-| menus      | `MenuOptions[]`   | 设置菜单选项                                                             | `[]`    | -    |
-| menu-props | `LayoutMenuProps` | 设置菜单属性                                                             | `null`  | -    |
-| logo       | `string`          | 设置 Logo 图片地址                                                       | `''`    | -    |
-| sign-name  | `string`          | 设置标语                                                                 | `''`    | -    |
-| fixed      | `string`          | 设置边栏是否固定，可以传入一个断点或媒体查询字符串，当满足该查询时才固定 | `'lg'`  | -    |
+| 名称       | 类型                  | 说明                                                                     | 默认值    | 始于     |
+| ---------- | --------------------- | ------------------------------------------------------------------------ | --------- | -------- |
+| tag        | `string`              | 设置渲染的标签                                                           | `aside`   | -        |
+| expanded   | `boolean`             | 当边栏不固定时，设置边栏是否为展开状态，可以使用 `v-model` 双向绑定      | `false`   | -        |
+| reduced    | `boolean`             | 设置边栏是否为缩小状态，可以使用 `v-model` 双向绑定                      | `false`   | -        |
+| menus      | `MenuOptions[]`       | 设置菜单选项                                                             | `[]`      | -        |
+| menu-props | `LayoutMenuProps`     | 设置菜单属性                                                             | `null`    | -        |
+| logo       | `string`              | 设置 Logo 图片地址                                                       | `''`      | -        |
+| sign-name  | `string`              | 设置标语                                                                 | `''`      | -        |
+| fixed      | `string`              | 设置边栏是否固定，可以传入一个断点或媒体查询字符串，当满足该查询时才固定 | `'lg'`    | -        |
+| sign-type  | `'aside' \| 'header'` | 设置标语所在的块，非 `'aside'` 时边栏的上定位会调整                      | `'aside'` | `2.1.23` |
 
 ### LayoutAside 事件
 

diff --git a/style/layout.scss b/style/layout.scss
@@ -88,6 +88,13 @@ $layout: map.merge(
       width: 64px;
     }
 
+    &--no-sign#{&}--fixed {
+      top: get-css-var('layout-header-height');
+      max-height: calc(
+        #{get-css-var('layout-view-height')} - #{get-css-var('layout-header-height')}
+      );
+    }
+
     &-top {
       display: flex;
       flex-shrink: 0;
@@ -112,15 +119,6 @@ $layout: map.merge(
     }
   }
 
-  &--header-main &__aside {
-    &--fixed {
-      top: get-css-var('layout-header-height');
-      max-height: calc(
-        #{get-css-var('layout-view-height')} - #{get-css-var('layout-header-height')}
-      );
-    }
-  }
-
   &--locked &__aside {
     transition-duration: 0ms;
   }