Input 输入

Input 输入框组件用于接收用户输入，支持多种类型和状态，具有流畅的动画效果和现代化的设计风格。
状态：Beta

基础用法

基础输入

最常见的文本输入用法。

示例即将加载...

<template>
  <TuffInput v-model="value" placeholder="请输入内容" />
</template>

输入框类型

目前支持：text / password / textarea / date / email / number。

Input Types

文本、密码与多行文本。

示例即将加载...

<template>
  <TuffInput v-model="text" placeholder="文本输入" />
  <TuffInput v-model="password" type="password" placeholder="密码输入" />
  <TuffInput v-model="content" type="textarea" placeholder="多行文本" :rows="4" />
</template>

只读 / 禁用

Readonly / Disabled

只读与禁用状态。

示例即将加载...

<template>
  <TuffInput v-model="readonlyValue" readonly placeholder="只读" />
  <TuffInput v-model="disabledValue" disabled placeholder="禁用" />
</template>

可清空

Clearable

支持一键清空内容。

示例即将加载...

<template>
  <TuffInput v-model="clearableValue" clearable placeholder="可清空" />
</template>

前后缀插槽

Prefix / Suffix

使用图标增强提示。

示例即将加载...

<template>
  <TuffInput v-model="withPrefix" placeholder="Search">
    <template #prefix>
      <TxIcon icon="i-carbon-search" />
    </template>
  </TuffInput>
  <TuffInput v-model="withSuffix" placeholder="User">
    <template #suffix>
      <TxIcon icon="i-carbon-user" />
    </template>
  </TuffInput>
</template>

API

Props

属性名	类型	说明
modelValue / v-model		绑定值
placeholder		占位文本
type	textpasswordtextareadateemailnumber	类型
disabled		是否禁用
readonly		是否只读
clearable		是否可清空
rows		文本域行数（仅 textarea）
prefixIcon		前缀图标类名
suffixIcon		后缀图标类名