Textarea 文本域
精致的文本域组件
基本用法
通过 v-model 绑定一个值
禁用和只读
通过设置 disabled 来禁用。 设置 readonly 可设置只读。 两者样式上有一定差异。
最大长度
可以设置 maxlength 来限制文本长度。
自适应
设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象,让输入框自动调整。
API
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelValue | 绑定值 | string | number | '' |
| disabled | 是否禁用 | boolean | - |
| readonly | 是否只读 | boolean | - |
| maxlength | 最大输入长度 | string | number | - |
| autofocus | 是否自动获取焦点 | boolean | - |
| placeholder | 占位符 | string | - |
| autocomplete | 是否开启自动填充特性提示 | string | off |
Events
| 事件名称 | 说明 | 类型 |
|---|---|---|
| input | 输入时触发 | (val: string | number) => void |
| change | 修改后触发 | (val: string | number) => void |
| focus | 获取焦点时 | (evt: FocusEvent) => void |
| blur | 失去焦点时 | (evt: FocusEvent) => void |
Interface
组件导出以下类型定义:
ts
import type {
TextareaInstance,
TextareaProps,
TextareaAutoSize,
TextareaResize
} from 'fz-design'import type {
TextareaInstance,
TextareaProps,
TextareaAutoSize,
TextareaResize
} from 'fz-design'Exposes
组件向外暴露的方法
| 名称 | 说明 | 类型 |
|---|---|---|
| clear | 输入时触发 | () => void |
| select | 修改后触发 | () => void |
| focus | 获取焦点时 | () => void |
| blur | 失去焦点时 | () => void |
| resizeTextarea | 改变 textarea 大小 | () => void |
| textarea | HTML textarea 元素 | Ref<HTMLTextAreaElement> |