Input 单行输入框
用于接收用户单行文本输入的表单组件,支持多种输入类型、密码模式、输入验证等功能。
基本用法
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | str | "" | 输入框当前值 |
placeholder | str | "" | 无内容时显示的占位提示文字 |
password | bool | False | 密码模式,输入内容显示为 *(无需传值,存在即为 True) |
disabled | bool | False | 是否禁用输入框(无需传值,存在即为 True) |
compact | bool | False | 紧凑模式,减少内边距(无需传值,存在即为 True) |
type | str | "text" | 输入类型:"text" | "integer" | "number" | "url" | "email" | "telephone" |
max_length | int | 0 | 最大输入字符数,0 表示不限制 |
v-model
v-model 默认绑定属性:value
vue
<Input v-model="username.value" placeholder="用户名" />事件
| 事件 | 说明 |
|---|---|
input_changed | 输入内容改变时触发(对应 Textual Input.Changed),事件对象包含 value 属性 |
input_submitted | 用户按下 Enter 提交时触发(对应 Textual Input.Submitted),事件对象包含 value 属性 |
vue
<Input
v-model="query.value"
placeholder="搜索..."
@input_changed="on_change"
@input_submitted="on_submit"
/>通用属性
所有 Textual-vuepy 组件均支持以下属性:
| 属性 | 类型 | 说明 |
|---|---|---|
id | str | 组件 CSS ID |
style | str | TCSS 内联样式 |
class | str | TCSS 类名(空格分隔) |
border_title | str | 边框标题 |
border_subtitle | str | 边框副标题 |