Textarea 文本域

示例

基础用法

<Textarea placeholder="请输入内容" />

指定行数 3

<Textarea placeholder="请输入内容" rows={3} />

自动调整高度

<Textarea autosize />

显示行数限制 minRows: 1

<Textarea autosize={{ minRows: 1 }} />

显示行数限制 minRows: 1, maxRows: 5

<Textarea autosize={{ minRows: 1, maxRows: 5 }} />

字数统计

<Textarea {value} statistic />

字数限制

<Textarea {value} statistic maxlength={30} />

只读状态

<Textarea {value} readonly />

禁用状态

<Textarea {value} disabled />

表单-水平布局

<script lang="ts">
  let form = $state({
    remark: '',
  })
</script>

<Form header="表单-水平布局" bind:data={form} layout="horizontal">
  <FormItem label="备注" field="remark" required>
    <Textarea
      bind:value={form.remark}
      placeholder="请填写备注"
      maxlength={100}
      statistic
    />
  </FormItem>
</Form>

表单-垂直布局

<Form header="表单-垂直布局" bind:data={form} layout="vertical">
  <FormItem label="备注" field="remark" required>
    <Textarea
      bind:value={form.remark}
      placeholder="请填写备注"
      maxlength={100}
      statistic
    />
  </FormItem>
</Form>

Textarea

属性

事件