feat(pro:textarea): add rows prop

IDuxFE · Mar 27, 2023 · f138648 · f138648
1 parent 703122f
commit f138648
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 5 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
@@ -38,6 +38,7 @@ export default defineComponent({
     const common = useGlobalConfig('common')
     const config = useGlobalConfig('textarea')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-textarea`)
+    const rows = computed(() => props.rows)
 
     const {
       elementRef,
@@ -58,7 +59,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, rows)
     const errorLinesContext = useErrorLines(props, lineHeight, boxSizingData)
     const dataCount = useDataCount(props, config, valueRef)
 
@@ -91,7 +92,9 @@ export default defineComponent({
       handleCompositionEnd,
     })
 
-    const style = computed(() => normalizeStyle({ resize: props.resize ?? config.resize }))
+    const style = computed(() =>
+      normalizeStyle({ resize: props.resize ?? config.resize, height: `${rows.value! * lineHeight.value + 10}px` }),
+    )
     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,13 +16,18 @@ export function useRowCounts(
   valueRef: Ref<string | undefined>,
   lineHeight: ComputedRef<number>,
   sizingData: ComputedRef<ɵBoxSizingData>,
+  rows: ComputedRef<number>,
 ): ComputedRef<number[]> {
-  const [rowCounts, setRowCounts] = useState<number[]>([])
+  const [rowCounts, setRowCounts] = useState<number[]>(rows.value ? Array.from({ length: rows.value }, _ => 1) : [])
   const calcRowCounts = () => {
     const textarea = textareaRef.value!
     const lines = valueRef.value?.split('\n') ?? []
-
     const { paddingSize } = sizingData.value
+
+    if (lines.length < rows.value) {
+      lines.push(...Array.from({ length: rows.value - lines.length }, _ => ''))
+    }
+
     setRowCounts(
       lines.map(line =>
         ɵMeasureTextarea(

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

diff --git a/packages/pro/textarea/style/index.less b/packages/pro/textarea/style/index.less
@@ -48,7 +48,6 @@
     cursor: default;
   }
   &-index-column {
-    align-self: stretch;
     min-width: @pro-textarea-index-column-min-width;
     color: @pro-textarea-index-column-color;
     background-color: @pro-textarea-index-column-background-color;