fix(pro:textarea): add rows prop (#1518)

IDuxFE · Apr 17, 2024 · 562314c · 562314c
1 parent 6d51cf9
commit 562314c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/packages/pro/textarea/docs/Api.zh.md b/packages/pro/textarea/docs/Api.zh.md
@@ -15,6 +15,7 @@
 | `maxCount` | 数字提示显示的最大值 | `number` | - | ✅ | 仅用于提示，不做校验控制 |
 | `readonly` | 是否只读状态 | `boolean` | `false` | - | - |
 | `resize` | 缩放方向 | `none \| both \| horizontal \| vertical` | `none` | ✅ | - |
+| `rows` | 展示文本的行数 | `number` | - | - | - |
 | `showCount` | 是否展示字符数 | `boolean` | `false` | ✅ | - |
 | `size` | 设置大小 | `'sm' \| 'md' \| 'lg'` | `'md'` | ✅ | - |
 | `trim` | 失去焦点后自动去除前后空格  | `boolean` | `false` | - | - |

diff --git a/packages/pro/textarea/src/ProTextarea.tsx b/packages/pro/textarea/src/ProTextarea.tsx
@@ -63,7 +63,7 @@ export default defineComponent({
     const valueRef = toRef(accessor, 'value')
 
     const { lineHeight, boxSizingData, resizeToFitContent } = ɵUseAutoRows(elementRef, ref(true))
-    const rowCounts = useRowCounts(elementRef, valueRef, lineHeight, boxSizingData)
+    const rowCounts = useRowCounts(elementRef, valueRef, lineHeight, boxSizingData, props.rows)
     const errorLinesContext = useErrorLines(props, lineHeight, boxSizingData)
     const dataCount = useDataCount(props, config, valueRef)
 
@@ -96,7 +96,14 @@ export default defineComponent({
       handleCompositionEnd,
     })
 
-    const style = computed(() => normalizeStyle({ resize: props.resize ?? config.resize }))
+    const style = computed(() =>
+      normalizeStyle({
+        resize: props.resize ?? config.resize,
+        height: props.rows
+          ? `${props.rows * lineHeight.value + boxSizingData.value.paddingBottom + boxSizingData.value.paddingTop}px`
+          : undefined,
+      }),
+    )
     const classes = computed(() => {
       const prefixCls = mergedPrefixCls.value
       const size = props.size ?? config.size

diff --git a/packages/pro/textarea/src/composables/useRowsCounts.ts b/packages/pro/textarea/src/composables/useRowsCounts.ts
@@ -16,28 +16,33 @@ export function useRowCounts(
   valueRef: Ref<string | undefined>,
   lineHeight: ComputedRef<number>,
   sizingData: ComputedRef<ɵBoxSizingData>,
+  rows: number,
 ): ComputedRef<number[]> {
   const [rowCounts, setRowCounts] = useState<number[]>([])
   const calcRowCounts = () => {
     const textarea = textareaRef.value!
     const lines = valueRef.value?.split('\n') ?? []
-
     const { paddingSize } = sizingData.value
-    setRowCounts(
-      lines.map(line =>
-        ɵMeasureTextarea(
-          textarea,
-          el => {
-            el.value = line || 'x'
-
-            // trigger reflow to ensure scrollHeight is calculated when referenced
-            void el.scrollHeight
-            return Math.round((el.scrollHeight - paddingSize) / lineHeight.value)
-          },
-          true,
-        ),
+
+    const res = lines.map(line =>
+      ɵMeasureTextarea(
+        textarea,
+        el => {
+          el.value = line || 'x'
+
+          // trigger reflow to ensure scrollHeight is calculated when referenced
+          void el.scrollHeight
+          return Math.round((el.scrollHeight - paddingSize) / lineHeight.value)
+        },
+        true,
       ),
     )
+
+    if (rows && res.length < rows) {
+      res.push(...new Array(rows - res.length).fill(1))
+    }
+
+    setRowCounts(res)
   }
 
   watch(valueRef, calcRowCounts)

diff --git a/packages/pro/textarea/src/types.ts b/packages/pro/textarea/src/types.ts
@@ -24,6 +24,7 @@ export const proTextareaProps = {
   placeholder: String,
   resize: { type: String as PropType<TextareaResize>, default: undefined },
   showCount: { type: Boolean, default: undefined },
+  rows: Number,
 
   onKeyDown: [Function, Array] as PropType<MaybeArray<(evt: KeyboardEvent) => void>>,
 } as const