Input 输入框
用于表单中的文本输入，支持类型选择、错误提示、禁用、聚焦、选中等常用交互能力。支持双向绑定。
基础用法
默认 type 为 text, 可通过 type 设置为 textarea。
<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>
数字输入框
TsInputNumber 支持 min/max/step/precision 与 controlsPosition 配置。
<template>
<div class="component-card-demo-column">
<TsInputNumber
v-model="valueA"
:min="0"
:max="100"
:step="2"
:precision="0"
:controls="true"
controlsPosition="right"
placeholder="请输入数字"
/>
<TsInputNumber v-model="valueB" :min="-10" :max="10" :step="0.5" :precision="1" placeholder="支持小数步进" />
<TsInputNumber v-model="valueC" :controls="false" :disabled="true" placeholder="禁用状态" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TsInputNumber } from 'tui';
const valueA = ref(10);
const valueB = ref(1.5);
const valueC = ref(8);
</script>
密码输入框
可通过 type 设置为 password。
<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 属性即可得到一个可一键清空的输入框。
<template>
<TsInput v-model="clearValue" clearable placeholder="请输入内容" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TsInput } from 'tui';
const clearValue = ref('');
</script>
错误提示
展示错误状态。
<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 设置为只读。
<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 插槽添加图标或交互元素。
<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 尺寸。
<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 属性可开启轮廓风格的输入框样式，通常用于页面视觉较轻的场景。
<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" 类型使用，可构建更完整的表单交互体验。
<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 插槽可在输入框内部右侧插入自定义内容，适用于放置按钮、图标、头像、验证码图片等。 本示例展示了在输入框右侧嵌入"获取验证码"按钮，适用于手机号或邮箱验证码输入场景。
<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
text / password / textarea / number
small / medium / large / x-large
null / true / false / string
文本域是否允许用户调整尺寸（textarea 时生效）
null / true / false / string
文本域是否允许用户调整尺寸（textarea 时生效）
事件 Events
(e: 'input', val: any): void;
(e: 'blur', val: any): void;
(e: 'change', val: any): void;