WebApp【公共组件库】@前端(For Git Submodule)
coder77
2025-04-02 615f30689fc55c0e38b83d188ecc39b9537aa6df
fix: CTextArea组件增加maxLength,高度恢复原逻辑
1 files modified
27 ■■■■ changed files
forms/textarea/CTextArea.vue 27 ●●●● patch | view | raw | blame | history
forms/textarea/CTextArea.vue
@@ -1,13 +1,16 @@
/**
 * CTextArea
 * 多行文本输入组件,用于在表单中收集用户的多行文本输入
 * 支持设置输入区域高度,可以通过字数、行数或像素值来控制
 * 支持设置输入区域高度,可以通过行数或像素值来控制
 * 支持只读模式和自动增高功能
 * @author Tevin
 */
<template>
    <view class="c-textarea" :class="readOnly ? 'read-only' : ''">
    <view
        class="c-textarea"
        :class="readOnly?'read-only':''"
    >
        <AtInput
            ref="input"
            :name="itemRes.name"
@@ -19,10 +22,7 @@
        <textarea
            ref="textarea"
            class="textarea"
            :style="{
                minHeight: minHeight,
                maxHeight: maxHeight,
            }"
            :style="{minHeight: areaHeight, height: areaHeight}"
            :placeholder="placeholder"
            :value="itemRes.formData[itemRes.name]"
            :maxlength="maxLength"
@@ -68,21 +68,10 @@
        return {};
    },
    computed: {
        minHeight() {
            // 默认最小高度为2行
            const defaultRows = 2;
            return Taro.pxTransform(defaultRows * 40, 750);
        },
        maxHeight() {
            if (this.maxLength > 0) {
                // maxLength 优先级最高
                const estimatedRows = Math.ceil(this.maxLength / 25);
                return Taro.pxTransform(estimatedRows * 40, 750);
            } else if (this.rows) {
                // 其次是 rows
        areaHeight() {
            if (this.rows) {
                return Taro.pxTransform(this.rows * 40, 750);
            } else {
                // 最后是 height
                return Taro.pxTransform(this.height, 750);
            }
        },