Tui

Input 输入框

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

基础用法

默认 type 为 text, 可通过 type 设置为 textarea。

示例代码

vue

<template>
  <div class="component-card-demo-column">
    <TsInput v-model="inputValue" placeholder="请输入内容" />
    <TsInput v-model="inputValue" type="textarea" resize :rows="4" placeholder="请输入内容" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsInput } from 'tui';

const inputValue = ref('');
</script>

密码输入框

可通过 type 设置为 password。

示例代码

vue

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

<script setup lang="ts">
import { ref } from 'vue';
import { TsInput } from 'tui';

const passwordValue = ref('');
</script>

一键清空

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

示例代码

vue

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

<script setup lang="ts">
import { ref } from 'vue';
import { TsInput } from 'tui';

const clearValue = ref('');
</script>

错误提示

展示错误状态。

示例代码

vue

<template>
  <TsInput v-model="inputValue" :error="true" placeholder="请输入" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsInput } from 'tui';

const inputValue = ref('');
</script>

禁用状态

通过 disabled 设置为只读。

示例代码

vue

<template>
  <div class="component-card-demo-column">
    <TsInput v-model="disabledValue" disabled placeholder="请输入内容" />
    <TsInput v-model="disabledEmptyValue" disabled placeholder="请输入内容" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsInput } from 'tui';

const disabledValue = ref('禁用输入框内容');
const disabledEmptyValue = ref('');
</script>

前后缀图标插槽

通过 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">
import { computed, ref } from 'vue';
import { TsInput } from 'tui';

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 四种预设值。若不传入则默认使用 medium 尺寸。

示例代码

vue

<template>
  <div class="component-card-demo-wrap-center">
    <TsInput style="width: 200px" v-model="inputValue" size="small" placeholder="请输入内容" />
    <TsInput style="width: 200px" v-model="inputValue" placeholder="请输入内容" />
    <TsInput style="width: 200px" v-model="inputValue" size="large" placeholder="请输入内容" />
    <TsInput style="width: 200px" v-model="inputValue" size="x-large" placeholder="请输入内容" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsInput } from 'tui';

const inputValue = ref('');
</script>

输入框样式：Outline 风格

使用 outline 属性可开启轮廓风格的输入框样式，通常用于页面视觉较轻的场景。

示例代码

vue

<template>
  <div style="display: flex; flex-direction: column; row-gap: 12px">
    <TsInput v-model="inputValue" outline placeholder="请输入内容" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsInput } from 'tui';

const inputValue = ref('');
</script>

带底部提示的密码输入框

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

密码强度

示例代码

vue

<template>
  <div style="display: flex">
    <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>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsInput } from 'tui';

const inputValue = ref('');
</script>

带验证码按钮的输入框

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

示例代码

vue

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

<script setup lang="ts">
import { ref } from 'vue';
import { TsInput, TsButton } from 'tui';

const inputValue = ref('');
</script>

属性 Props

v-model

绑定值,支持双向绑定

string

value

绑定值

string

type

输入框类型

string

text / password / textarea / number

text

placeholder

占位符提示

string

changed 0.3.6 变更为空字符串

size

输入框尺寸

string

small / medium / large / x-large

medium

border

是否显示边框

boolean

true

added 0.3.8

error

是否显示错误状态

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

errorText

错误信息内容

string

deprecated 0.5.0

errorFixed

错误提示是否固定占位

boolean

false

deprecated 0.5.0

required

是否必填

boolean

false

deprecated 0.3.8

事件 Events

input

输入时触发

(e: 'input', val: any): void;

blur

输入时触发

(e: 'blur', val: any): void;

change

值变化时触发

(e: 'change', val: any): void;

enter

回车时触发

verify

验证时触发

deprecated 0.3.8

inputClick

输入框点击时触发

clear

清空值时触发

插槽 Slots

prefix-icon

输入框前置图标插槽

suffix-icon

输入框后置图标插槽

suffix

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

content-bottom

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

基础用法

密码输入框

一键清空

错误提示

禁用状态

前后缀图标插槽

不同尺寸

输入框样式：Outline 风格

带底部提示的密码输入框

带验证码按钮的输入框

属性 Props

事件 Events

插槽 Slots