CTextArea 多行文本输入组件

功能说明

CTextArea 是一个多行文本输入组件，用于在表单中收集用户的多行文本输入。组件支持设置输入区域高度，可以通过行数或像素值来控制，并支持只读模式。

引用方式

import { CTextArea } from '@components/forms/textarea';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• height (Number，可选)：文本域输入区域高度，单位为像素，默认为 94
• rows (Number，可选)：文本域输入区行数，设置后会覆盖 height 参数
• readOnly (Boolean，可选)：只读模式，默认为 false
• placeholder (String，可选)：输入框占位提示文本

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="description" label="描述">
      <CTextArea placeholder="请输入描述内容" />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CTextArea } from '@components/forms/textarea';

export default {
  components: {
    CForm,
    CFormItem,
    CTextArea
  },
  data() {
    return {
      form: {
        description: ''
      }
    };
  }
};
</script>

设置输入区域高度

<!-- 通过像素值设置高度 -->
<CFormItem name="content" label="内容">
  <CTextArea :height="150" placeholder="请输入内容" />
</CFormItem>

<!-- 通过行数设置高度 -->
<CFormItem name="remark" label="备注">
  <CTextArea :rows="5" placeholder="请输入备注" />
</CFormItem>

只读模式

<CFormItem name="description" label="描述">
  <CTextArea :readOnly="true" />
</CFormItem>

注意事项

1. CTextArea 组件通常需要配合 CForm 和 CFormItem 组件一起使用
2. 当同时设置 height 和 rows 参数时，rows 参数优先生效
3. rows 参数会按照每行 40px 的高度计算输入区域的总高度
4. 组件支持自动增高，当输入内容超过设定高度时，输入区域会自动增高
5. 在只读模式下，输入区域将不可编辑