Input 输入框

输入框（Input）是表单中最基础的元素，用于让用户输入和编辑文本内容。

基础用法

通过 v-model 实现双向绑定，支持 text、password、email、number 等多种 type。

<TInput placeholder="请输入内容..."/>
<TInput type="password" placeholder="请输入密码..."/>
<TInput type="number" placeholder="请输入数字..."/>
<TInput type="email" placeholder="email@example.com"/>

尺寸

通过 size 属性控制输入框的尺寸：'lg'（大）、默认（中）、'sm'（小）。

<TInput size="lg" placeholder="大尺寸输入框"/>
<TInput placeholder="默认尺寸输入框"/>
<TInput size="sm" placeholder="小尺寸输入框"/>

样式变体

提供 rounded（圆角）和 flush（无边框）两种变体风格。

<TInput rounded placeholder="圆角输入框"/>
<TInput flush placeholder="无边框输入框"/>
<TInput disabled placeholder="禁用输入框"/>

带图标

通过 prepend-icon 和 append-icon 属性在输入框前后添加图标。图标组件来自 @tabler/icons-vue。

<TInput :prepend-icon="IconSearch" placeholder="搜索..."/>
<TInput type="password" :append-icon="IconUser" placeholder="用户名"/>
<TInput :prepend-icon="IconMail" :append-icon="IconAt" placeholder="email@example.com"/>
<TInput :prepend-icon="IconSearch" placeholder="搜索用户..."/>

输入组

通过 prepend-text、append-text 添加文本前缀/后缀，或使用 #prepend / #append 插槽嵌入自定义内容（如按钮）。

查看代码

<TInput prepend-text="https://" placeholder="your-domain.com"/>
<TInput append-text="¥" placeholder="金额" type="number"/>
<TInput placeholder="输入邮箱">
  <template #prepend>
    <span class="input-group-text"><IconMail :size="18"/></span>
  </template>
  <template #append>
    <button class="btn btn-primary" type="button">验证</button>
  </template>
</TInput>

验证状态

通过 validation 属性设置验证状态：'valid'（绿色）、'invalid'（红色）。配合 Bootstrap 的 .valid-feedback / .invalid-feedback 显示提示信息。

<TInput validation="valid" placeholder="输入正确"/>
<div class="valid-feedback">验证通过！</div>

<TInput validation="invalid" placeholder="输入错误"/>
<div class="invalid-feedback">请检查您的输入。</div>

双向绑定

v-model 支持 string 和 number 类型，组件内部使用 defineModel() 实现。

查看代码

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

  const value = ref('')
</script>
<template>
  <p>当前值：{{ value }}</p>
  <TInput v-model="value" placeholder="试着输入文字..."/>
</template>

标签与提示

通过 label、hint、required、label-description 属性快速构建带标签和提示的完整表单字段。

查看代码

<TInput label="邮箱地址" hint="我们不会将您的邮箱分享给他人。" placeholder="email@example.com"/>

<TInput label="邮政编码" label-description="选填" required placeholder="Your ZIP Code" hint="ZIP Code 必须为 US 或 CDN 格式。"/>

<TInput placeholder="输入内容...">
  <template #label>自定义标签 <span class="badge bg-blue ms-1">NEW</span></template>
  <template #hint>自定义 <a href="#">提示链接</a></template>
</TInput>

API

TInput 属性 (Props)

属性名	说明	类型	默认值
type	输入框原生类型	string	'text'
placeholder	占位符文本	string	undefined
size	输入框尺寸	'sm' | 'lg'	undefined
rounded	圆角风格	boolean	false
flush	无边框风格	boolean	false
disabled	禁用状态	boolean	false
readonly	只读状态	boolean	false
maxlength	最大字符长度	number	undefined
minlength	最小字符长度	number	undefined
name	原生 name 属性	string	undefined
id	原生 id 属性	string	undefined
autocomplete	自动补全	string	undefined
required	是否必填	boolean	false
prepend-icon	前置图标（Tabler 图标组件）	Icon	undefined
append-icon	后置图标（Tabler 图标组件）	Icon	undefined
prepend-text	前置文本	string	undefined
append-text	后置文本	string	undefined
validation	验证状态	'valid' | 'invalid'	undefined
block	块级宽度（w-100）	boolean	false
label	标签文本	string	undefined
label-description	标签右侧描述（如字符计数）	string	undefined
hint	提示文本	string	undefined
wrapper-class	最外层容器类名（如 "mb-3"）	string	undefined

TInput 事件 (Emits)

事件名	说明	回调参数
update:modelValue	输入值更新时触发	(value: string | number) => void

TInput 插槽 (Slots)

插槽名	说明
prepend	前置内容（替代 prepend-text），出现在 <input> 之前
append	后置内容（替代 append-text），出现在 <input> 之后
label	自定义标签内容（替代 label prop）
hint	自定义提示内容（替代 hint prop）