diff --git a/packages/pro/textarea/docs/Api.zh.md b/packages/pro/textarea/docs/Api.zh.md index d71b96ca2..e8bfaa2b1 100644 --- 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 index 3571b9865..988bdfe3a 100644 --- 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 index 1d37a6f2a..c2f3714c3 100644 --- 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, lineHeight: ComputedRef, sizingData: ComputedRef<ɵBoxSizingData>, + rows: number, ): ComputedRef { const [rowCounts, setRowCounts] = useState([]) 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 index de7a5b70d..a1ff94467 100644 --- 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, default: undefined }, showCount: { type: Boolean, default: undefined }, + rows: Number, onKeyDown: [Function, Array] as PropType void>>, } as const