WebApp【公共组件库】@前端(For Git Submodule)
‘chensiAb’
2025-03-31 32b09ee84d7187800a7a10f2264b8b4e30fc574a
forms/textarea/CTextArea.vue
@@ -1,24 +1,32 @@
/**
 * CTextArea
 * 多行文本输入组件,用于在表单中收集用户的多行文本输入
 * 支持设置输入区域高度,可以通过行数或像素值来控制
 * 支持只读模式和自动增高功能
 * @author Tevin
 */
<template>
    <view class="c-textarea">
    <view
        class="c-textarea"
        :class="readOnly?'read-only':''"
    >
        <AtInput
            ref="input"
            :name="itemRes.name"
            :title="itemRes.label"
            :required="itemRes.required"
            :disabled="itemRes.disabled"
            :error="itemRes.error"
        />
        <textarea
            ref="textarea"
            class="textarea"
            :style="{height: areaHeight}"
            :style="{minHeight: areaHeight, height: areaHeight}"
            :placeholder="placeholder"
            :value="itemRes.formData[itemRes.name]"
            :autoFocus="true"
            :autoFocus="false"
            :autoHeight="true"
            @input="evt=>itemRes.onChange(evt.detail.value)"
        />
    </view>
@@ -43,6 +51,13 @@
            type: Number,
            default: 94,
        },
        // 文本雨输入区行数
        rows: Number,
        // 只读模式
        readOnly: {
            type: Boolean,
            default: false,
        },
        // 占位提示
        placeholder: String,
    },
@@ -51,7 +66,11 @@
    },
    computed: {
        areaHeight() {
            return Taro.pxTransform(this.height);
            if (this.rows) {
                return Taro.pxTransform(this.rows * 40, 750);
            } else {
                return Taro.pxTransform(this.height, 750);
            }
        },
    },
    methods: {},