fix: modal组件新增content-hight属性

ecaps1038 · Mar 23, 2024 · ba18e91 · ba18e91
1 parent b55c32d
commit ba18e91
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/packages/yike-design-demo/src/examples/modal/doc.md b/packages/yike-design-demo/src/examples/modal/doc.md
@@ -38,16 +38,17 @@
 
 ### API
 
-| 参数          | 描述                          | 类型             | 默认值  |
-| ------------- | ----------------------------- | ---------------- | ------- |
-| `size`        | 尺寸                          | `small \| large` | `large` |
-| `show-footer` | 底部区域展示                  | `boolean`        | `true`  |
-| `title`       | modal 标题                    | `string`         | `''`    |
-| `to`          | modal 默认展开的 dom 选择器   | `string`         | `body`  |
-| `scrollable`  | 页面可否滚动                  | `boolean`        | `false` |
-| `closeable`   | 点击遮罩层是否关闭 modal      | `boolean`        | `false` |
-| `showMask`    | 是否展示遮罩层                | `boolean`        | `true`  |
-| `escapable`   | 是否可以点击 esc 键关闭 modal | `boolean`        | `true`  |
+| 参数             | 描述                          | 类型                  | 默认值  |
+| ---------------- | ----------------------------- | --------------------- | ------- |
+| `size`           | 尺寸                          | `small \| large`      | `large` |
+| `show-footer`    | 底部区域展示                  | `boolean`             | `true`  |
+| `title`          | modal 标题                    | `string`              | `-`     |
+| `to`             | modal 默认展开的 dom 选择器   | `string`              | `body`  |
+| `scrollable`     | 页面可否滚动                  | `boolean`             | `false` |
+| `closeable`      | 点击遮罩层是否关闭 modal      | `boolean`             | `false` |
+| `showMask`       | 是否展示遮罩层                | `boolean`             | `true`  |
+| `escapable`      | 是否可以点击 esc 键关闭 modal | `boolean`             | `true`  |
+| `content-height` | 使内容在固定高度内滚动        | `string    \| number` | `-`     |
 
 ### Methods
 

diff --git a/packages/yike-design-ui/components/modal/src/modal.ts b/packages/yike-design-ui/components/modal/src/modal.ts
@@ -8,4 +8,5 @@ export type modalBaseProps = {
   showMask?: boolean;
   escapable?: boolean;
   showFooter?: boolean;
+  contentHeight?: string | number;
 };
diff --git a/packages/yike-design-ui/components/modal/src/modal.vue b/packages/yike-design-ui/components/modal/src/modal.vue
@@ -37,9 +37,11 @@
                 <IconCloseOutline />
               </div>
             </div>
-            <div :class="bem('content')">
-              <slot />
-            </div>
+            <yk-scrollbar :height="contentHeight">
+              <div :class="bem('content')">
+                <slot />
+              </div>
+            </yk-scrollbar>
             <div v-if="showFooter" :class="bem('footer')">
               <div class="yk-modal-footer-option">
                 <slot name="footer">
@@ -66,6 +68,7 @@ import { modalBaseProps } from './modal'
 import { IconCloseOutline } from '../../svg-icon'
 import YkButton from '../../button'
 import YkSpace from '../../space'
+import YkScrollbar from '../../scrollbar'
 import '../style'
 
 defineOptions({