| | |
| | | /** |
| | | * CTextArea |
| | | * 多行文本输入组件,用于在表单中收集用户的多行文本输入 |
| | | * 支持设置输入区域高度,可以通过字数、行数或像素值来控制 |
| | | * 支持只读模式和自动增高功能 |
| | | * @author Tevin |
| | | */ |
| | | |
| | | <template> |
| | | <view class="c-textarea"> |
| | | <view class="c-textarea" :class="readOnly ? 'read-only' : ''"> |
| | | <AtInput |
| | | ref="input" |
| | | :name="itemRes.name" |
| | |
| | | <textarea |
| | | ref="textarea" |
| | | class="textarea" |
| | | :style="{height: areaHeight}" |
| | | :style="{ |
| | | minHeight: minHeight, |
| | | maxHeight: maxHeight, |
| | | }" |
| | | :placeholder="placeholder" |
| | | :value="itemRes.formData[itemRes.name]" |
| | | :maxlength="maxLength" |
| | | :autoFocus="false" |
| | | @input="evt=>itemRes.onChange(evt.detail.value)" |
| | | :autoHeight="true" |
| | | @input="evt => itemRes.onChange(evt.detail.value)" |
| | | /> |
| | | </view> |
| | | </template> |
| | |
| | | type: Number, |
| | | default: 94, |
| | | }, |
| | | // 文本雨输入区行数 |
| | | rows: Number, |
| | | // 最大输入长度 |
| | | maxLength: Number, |
| | | // 只读模式 |
| | | readOnly: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | }, |
| | |
| | | return {}; |
| | | }, |
| | | computed: { |
| | | areaHeight() { |
| | | return Taro.pxTransform(this.height, 750); |
| | | 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 |
| | | return Taro.pxTransform(this.rows * 40, 750); |
| | | } else { |
| | | // 最后是 height |
| | | return Taro.pxTransform(this.height, 750); |
| | | } |
| | | }, |
| | | }, |
| | | methods: {}, |