Tui

Input 输入框

用于表单中的文本输入，支持类型选择、错误提示、禁用、聚焦、选中等常用交互能力。支持双向绑定。

基础用法

默认 type 为 text，支持 v-model 绑定。

示例代码

vue

<template>
  <TsInput v-model="inputValue" placeholder="请输入内容" />
  <TsInput v-model="inputValue" type="textarea" :rows="4" placeholder="请输入内容" />
</template>
<script setup lang="ts">
  const inputValue = ref('');
</script>

密码输入框

通过 type 设置为 password。

示例代码

vue

<template>
  <TsInput type="password" placeholder="请输入密码" />
</template>

一键清空

使用 clearable 属性即可得到一个可一键清空的输入框。

示例代码

vue

<template>
   <TsInput v-model="inputValue" clearable placeholder="请输入内容" />
</template>

错误提示

展示错误信息，可自定义 errorText。

该字段不能为空

示例代码

vue

<template>
  <TsInput :error="true" errorText="该字段不能为空" />
</template>

禁用状态

通过 disabled 设置为只读。

示例代码

vue

<template>
  <TsInput disabled placeholder="已禁用" />
</template>

前后缀图标插槽

通过 prefix-icon/suffix-icon 插槽添加图标或交互元素。

示例代码

vue

<template>
  <TsInput v-model="inputValue" :type="inputType" placeholder="请输入内容">
    <template #prefix-icon>
      <i class="fa fa-shield text-gray-mid"></i>
    </template>
    <template #suffix-icon>
      <i class="fa text-gray-mid" :class="[iconClass]" @click="inputType = inputType === 'text' ? 'password' : 'text'"></i>
    </template>
  </TsInput>
</template>
<script setup lang="ts">
  const inputValue = ref('');
  const inputType = ref<'text' | 'password'>('password');
  const iconClass = computed(() => (inputType.value === 'text' ? 'fa-eye' : 'fa-eye-slash'));
</script>

不同尺寸

通过 size 属性可设置输入框尺寸，支持 small、medium、large、x-large 四种预设值。若不传入 size ，则默认使用 medium 尺寸。

示例代码

vue

<template>
  <TsInput v-model="inputValue" size="small" placeholder="请输入内容" />
  <TsInput v-model="inputValue" placeholder="请输入内容" />
  <TsInput v-model="inputValue" size="large" placeholder="请输入内容" />
  <TsInput v-model="inputValue" size="x-large" placeholder="请输入内容" />
</template>
<script setup lang="ts">
  const inputValue = ref('');
</script>

输入框样式：Outline 风格

使用 outline 属性可开启轮廓风格的输入框样式，通常用于页面视觉较轻的场景。
通过 size 属性可设置输入框尺寸，可选值有： small 、 medium （默认）、 large 。

示例代码

vue

<template>
  <TsInput v-model="inputValue" outline size="large" placeholder="请输入内容" />
</template>

带底部提示的密码输入框

支持自定义插槽内容，通过 #content-bottom 插槽可在输入框下方显示辅助提示信息，例如密码强度说明、格式要求等。搭配 type="password" 类型使用，可构建更完整的表单交互体验。

密码强度

示例代码

vue

<template>
  <TsInput v-model="inputValue" outline type="password" required placeholder="请输入密码">
    <template #content-bottom>
      <div style="margin-top: 8px; font-size: 12px; height: 24px; line-height: 16px; color: #86909c">密码强度</div>
    </template>
  </TsInput>
</template>

带验证码按钮的输入框

通过 #suffix 插槽可在输入框内部右侧插入自定义内容，适用于放置按钮、图标、头像、验证码图片等。
本示例展示了在输入框右侧嵌入“获取验证码”按钮，适用于手机号或邮箱验证码输入场景。

示例代码

vue

<template>
  <TsInput v-model="inputValue" outline placeholder="请输入验证码">
    <template #suffix>
      <TsButton
        :style="{ height: 'auto', padding: '0 12px', 'font-size': '12px', top: '4px', right: '4px', bottom: '4px', position: 'absolute' }"
      >
        获取验证码
      </TsButton>
    </template>
  </TsInput>
</template>

属性 Props

v-model

绑定值,支持双向绑定

string

value

绑定值

string

type

输入框类型

string

text / password / textarea / number

text

placeholder

占位符提示

string

0.3.6 变更为空字符串

size

输入框尺寸

string

small / medium / large / x-large

medium

error

是否显示错误状态

boolean

false

errorText

错误信息内容

string

errorFixed

错误提示是否固定占位

boolean

false

required

是否必填

boolean

false

clearable

是否一键清除

boolean

false

disabled

是否禁用

boolean

false

readonly

是否只读

boolean

false

原生id, 用于label获取焦点

string

isFocus

手动聚焦

boolean

false

outline

开始outline 样式效果

boolean

null / true / false / string

false

rows

文本域行数（textarea 时生效）

number

resize

文本域是否允许用户调整尺寸（textarea 时生效）

string | boolean

null / true / false / string

事件 Events

input

verify

enter

inputClick

change

clear

插槽 Slots

prefix-icon

输入框前置图标插槽

suffix-icon

输入框后置图标插槽

suffix

输入框后置插槽, 更多自定义内容

content-bottom

输入框底部插槽, error提示上面