t-input

Input 输入框

组件介绍

t-input 支持多种配置，包括前置图标、后置图标、清空输入、密码显示等功能。组件提供了丰富的属性，如绑定值、图标类名、是否显示边框等，可以根据不同需求进行定制。适用于各种表单场景，方便用户进行文本输入。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/input/input.uvue，通过 v-model 绑定输入值。

<!-- 基础输入框 -->
<t-input v-model="value" placeholder="请输入内容"></t-input>

<!-- 带前置图标 -->
<t-input v-model="value" prefixIcon="search" placeholder="搜索"></t-input>

<!-- 带清除按钮 -->
<t-input v-model="value" clearabled placeholder="可清除"></t-input>

<!-- 密码输入框 -->
<t-input v-model="value" password placeholder="请输入密码"></t-input>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
modelValue	双向绑定的值	string	''
prefixIcon	前置图标名称	string	''
prefixClass	前置图标样式	string	''
suffixIcon	后置图标名称	string	''
suffixClass	后置图标样式	string	''
clearabled	是否显示清除按钮	boolean	false
clearIcon	清除按钮图标名称	string	'close'
clearClass	清除按钮样式	string	''
password	是否为密码输入框	boolean	false
eyeIcon	密码可见图标名称	string	'eye'
eyeOffIcon	密码不可见图标名称	string	'eye-off'
eyeClass	密码切换图标样式	string	''
name	输入框名称	string	''
inputType	输入框类型	string	'text'
placeholder	占位提示文字	string	''
placeholderstyle	占位文字样式	string	''
maxlength	最大输入长度	number	-1
cursorSpacing	光标与键盘的距离	number	0
autoFocus	是否自动聚焦	boolean	false
focus	是否聚焦	boolean	false
confirmType	键盘右下角按钮文字	string	'done'
inputClass	输入框样式	string	''

Events

事件名	说明	回调参数
input	输入时触发	value: string
focus	聚焦时触发	-
blur	失焦时触发	-
confirm	点击键盘完成按钮时触发	-
keyboardheightchange	键盘高度变化时触发	-
click	点击时触发	-
clear	清除时触发	-
update:modelValue	双向绑定值更新时触发	value: string

Slots

插槽名	说明
left	左侧内容插槽，默认显示前置图标
right	右侧内容插槽，默认显示后置图标