输入框

TuiInput 是基础的表单输入组件。 支持单行文本、多行文本、密码隐藏、数字输入等多种模式，并提供丰富的前后缀装饰能力。

基础用法

文本输入

最基础的用法，使用 v-model 绑定数据。

• Clearable: 设置 clearable 属性可显示一键清空按钮。
• MaxLength: 设置 maxLength 可限制输入长度，并在右侧显示字数统计。

<template>
  <div class="demo-gap">
    <TuiInput v-model="val1" placeholder="请输入..." />
    
    <TuiInput v-model="val2" clearable placeholder="可清空" />
    
    <TuiInput v-model="val3" :maxLength="30" clearable placeholder="限制30字" />
  </div>
</template>

密码输入

将 type 设置为 'password'。 组件内置了密码显隐切换功能（小眼睛图标）。

<TuiInput type="password" v-model="password" placeholder="请输入密码" />

数字输入 (Number)

将 type 设置为 'number'。 支持最大/最小值限制、步进值以及精度控制。

• min/max: 限制数值范围。
• step: 步长（点击按钮增减的数值）。
• precision: 数值精度（保留小数位数）。

<template>
  <TuiInput type="number" v-model="num1" />
  
  <TuiInput type="number" :min="0" :max="10" v-model="num2" />
  
  <TuiInput type="number" :step="0.05" :precision="2" v-model="num3" />
</template>

多行文本 (Textarea)

将 type 设置为 'textarea'。

• rows: 设置默认行数。
• autosize: 是否根据内容自动调整高度（自适应）。

<TuiInput 
  type="textarea" 
  :rows="3" 
  :maxLength="200" 
  v-model="desc" 
  placeholder="请输入描述..." 
/>

装饰与组合

图标 (Icons)

提供了三种图标位置属性：

• icon: 默认尾部图标（通常用于搜索）。
• prefixIcon: 头部图标。
• suffixIcon: 尾部图标（与 icon 位置类似，但语义更明确）。

<template>
  <TuiInput icon="tui-icon ti-search" v-model="search" />
  
  <TuiInput 
    prefixIcon="tui-icon ti-user" 
    suffixIcon="tui-icon ti-info-circle" 
    v-model="user" 
  />
</template>

复合插槽 (Slots)

通过 prefix 和 suffix 插槽，可以在输入框前后嵌入更复杂的元素，如标签、按钮或下拉菜单。

<template>
  <TuiInput v-model="url">
    <template #prefix>Http://</template>
    <template #suffix>.com</template>
  </TuiInput>

  <TuiInput v-model="keyword" placeholder="搜索...">
    <template #suffix>
      <TuiButton type="primary" size="small">Search</TuiButton>
    </template>
  </TuiInput>
</template>

状态与尺寸

• Disabled: 禁用状态，不可编辑且样式变灰。
• Readonly: 只读状态，不可编辑但样式保持原样（无边框或浅色背景）。
• Size: 支持 large, default, small。

<template>
  <TuiInput disabled value="禁用状态" />
  <TuiInput readonly value="只读状态" />
  
  <div class="demo-gap">
    <TuiInput size="large" placeholder="Large" />
    <TuiInput size="default" placeholder="Default" />
    <TuiInput size="small" placeholder="Small" />
  </div>
</template>

API 参考

Props

属性名	类型	默认值	说明
modelValue	String/Number	-	绑定值。
type	String	'text'	类型。可选：text, textarea, password, number。
size	String	'default'	尺寸。可选：large, default, small。
placeholder	String	-	输入框占位文本。
clearable	Boolean	false	是否可清空。
disabled	Boolean	false	是否禁用。
readonly	Boolean	false	是否只读。
maxLength	Number/String	-	最大输入长度。
icon	String	-	尾部图标类名。
prefixIcon	String	-	头部图标类名。
suffixIcon	String	-	尾部图标类名。
rows	Number	3	(Textarea) 行数。
autosize	Boolean	false	(Textarea) 是否自适应高度。
min	Number	-100	(Number) 最小值。
max	Number	MAX_SAFE	(Number) 最大值。
step	Number	1	(Number) 步长。
precision	Number	0	(Number) 数值精度。
formatter	Function	-	内容格式化函数。
autocomplete	String	'off'	原生 autocomplete 属性。

Events

事件名	说明	回调参数
update:modelValue	绑定值变化时触发。	(value)
input	输入时触发。	(value)
change	失去焦点或回车时触发（仅当值改变）。	(value)
focus	获得焦点时触发。	(event)
blur	失去焦点时触发。	(event)
clear	点击清空按钮时触发。	-

Slots

插槽名	说明
prefix	输入框头部内容（文本或组件）。
suffix	输入框尾部内容（文本或组件）。