多行文本框组件用于收集大量文本数据。
从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。
在组件上附加一个图标,使用与 v-icon
相同的语法
在组件的外部添加一个图标,使用与 v-icon
相同的语法
根据文本数量自动增长文本
启用自动聚焦
更改输入的背景颜色
当使用 clearable 且有输入值时应用
添加输入框清除功能,默认图标是 Material Icons clear
将指定的颜色应用于控件 - 它可以是 material color 的名称(例如 success
或者 purple
)或 css 颜色 (#033
或 rgba(255, 0, 0, 0.5)
)。 你可以在 colors page 中找到内置类的列表。
为输入长度创建一个计数器,如果未指定数字,则默认为25,不会应用任何验证。
将深色主题变量应用于组件。 除非您已将 application theme 配置为 dark 或在组件上使用 color 属性,否则组件的颜色默认为 _white_。 您可以在材料设计文档中找到更多信息 dark themes。
降低输入高度
禁用输入
将输入框设置为手动错误状态。
一次性显示的错误总数
将输入框置于错误状态,并传入自定义的错误信息。将与来自 rules 属性的任何验证相结合。这个字段不会触发验证。
应用替代填充输入样式
当使用solo或者solo-inverted属性时,移除添加到元素的标高(阴影)
指定输入类型为全宽度
设置输入的高度
隐藏提示和验证错误。当设置为 auto
时,只有在有信息(提示、错误信息、计数器值等)要显示时,才会显示信息。
提示文本
设置组件上的 DOM id
设置输入标签
为组件设置浅色主题。
指定加载器的高度
显示线性进度条。可以是指定将哪种颜色应用于进度条的字符串(任何 material 色彩——主要(primary), 次要(secondary), 成功(success), 信息(info),警告(warning),错误(error)),或者使用组件的布尔值 color(由色彩属性设置——如果它被组件支持的话)还可以是原色。
显示消息列表或消息(如果使用字符串)
移除调整大小的句柄
将轮廓样式应用于输入
强制提示总是可见的
设置输入的占位符文本
显示前缀
在组件前添加一个图标,使用与 v-icon
相同的语法
在组件的输入中添加一个图标,使用与 v-icon
相同的语法
将输入设置为只读状态
反转输入方向
向输入添加边框半径
每行的高度值。 需要使用 auto-grow 属性。
默认行数
接受一个函数数组(array of functions),该数组接受一个输入值作为参数,并返回 true
/ false
或 a string
和一个错误消息
如果 outlined
则为圆形,如果 filled
则增加 border-radius
。必须与 outlined
或 filled
一起使用
标签在 focus/dirty 上不移动
改变输入框的样式
减少元素的不透明度,知道获得焦点
将输入设置为手动成功状态
将输入设置为成功状态,并传递自定义成功消息。
显示后缀
设置输入类型
延迟验证直到失去焦点的事件被触发
输入的值
在输入内容后添加一个项目
在输入内容内追加一个项目
默认Vue 插槽。
替换默认标签
自定义消息插槽。
{
key: number, // the messages index
message: string, // the message
}
在输入内容之前添加一个项目
在输入内容中预设一个项目
自定义进度线的插槽(loading属性不等于布尔值False时显示)
当输入焦点时发出
Event
当用户交互更改输入时发出
any
在单击输入时发出
MouseEvent
单击附加图标时发出
Event
单击附加的外部图标时发出
Event
单击可清除图标时发出
Event
单击前置图标时发出
Event
单击前置的内部图标时发出
Event
组件聚焦时发出
Event
被绑定模型的更新
any
按下 任何 键时发送
KeyboardEvent
单击时发出
MouseEvent
当单击释放时,发出
MouseEvent
error.sync
事件
boolean
24px !default;
18px !default;
10px !default;
8px !default;
6px !default;
-12px !default;
12px !default;
1.75rem !default;
32px !default;
0 !default;
2px !default;
12px !default;
12px !default;
下面是一些简单到复杂的例子。
append-icon
和 prepend-icon
属性有助于将上下文添加到 v-textarea
。
当使用 auto-grow
属性时,当包含的文本超过其大小时,多行文本框的大小将自动增加。
background-color
和 color
属性让您更好地控制样式 v-textarea
的样式。
autocomplete
属性为您提供使浏览器能够预测用户输入的选项。
您可以使用 clearable
属性清除 v-textarea
中的文本,并自定义与 clearable-icon
属性一起使用的图标。
counter
属性通知用户 v-textarea
的字符数限制。
v-textarea
使用 no-resize
属性,可以选择保持大小不变,而不管其内容的大小如何。
rows
属性可让您定义文本区域有多少行,当与 row-height
属性结合使用时,您可以通过定义行的高度进一步自定义行。
利用替代的输入样式,您可以创建易于构建和使用的惊人界面。