TinyVue Input输入框组件使用指南

如果超人不会飞2026-06-10 9:44

TinyVue Input 输入框组件使用指南

组件介绍

Input（输入框）是表单中最基础、最常用的交互组件，用于接收用户输入的文本、数字、密码等内容。TinyVue 的 Input 组件功能全面，支持文本域、密码框、一键清空、字数统计、只读态、掩码、历史记忆、自适应高度等企业级特性，可满足从简单输入到复杂表单的各种场景。

引入方式：

js 复制代码 
import { TinyInput } from '@opentiny/vue'

基本用法

通过 v-model 双向绑定输入值，placeholder 设置占位提示文本：

vue 复制代码 
<template>
  <tiny-input v-model="input" placeholder="请输入内容"></tiny-input>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('')
</script>

输入框类型

通过 type 属性设置输入框类型，支持 text（默认）、textarea（文本域）、password（密码框）以及其他原生 input 的 type 值（如 number、email、tel 等）：

vue 复制代码 
<template>
  <div>
    <tiny-input v-model="text" placeholder="文本输入"></tiny-input>
    <tiny-input type="password" v-model="password" placeholder="密码输入"></tiny-input>
    <tiny-input type="number" v-model="number" placeholder="数字输入"></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const text = ref('')
const password = ref('')
const number = ref('')
</script>

一键清空

通过 clearable 属性在输入框中显示清空图标按钮，点击即可清空输入内容：

vue 复制代码 
<template>
  <tiny-input v-model="input" clearable></tiny-input>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('123456')
</script>

注意： clearable 不适用于 type="textarea"。

密码框

当 type 为 password 时，通过 show-password 属性显示密码可见/隐藏切换图标：

vue 复制代码 
<template>
  <tiny-input type="password" v-model="input" show-password></tiny-input>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('123456')
</script>

禁用状态

通过 disabled 属性禁用输入框：

vue 复制代码 
<template>
  <div>
    <tiny-input v-model="input" disabled placeholder="禁用输入框"></tiny-input>
    <tiny-input type="textarea" disabled v-model="input" placeholder="禁用文本域"></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('')
</script>

尺寸

通过 size 属性设置输入框尺寸，可选值：medium、small、mini：

vue 复制代码 
<template>
  <div>
    <tiny-input v-model="input" size="medium" placeholder="medium"></tiny-input>
    <tiny-input v-model="input" placeholder="默认尺寸"></tiny-input>
    <tiny-input v-model="input" size="small" placeholder="small"></tiny-input>
    <tiny-input v-model="input" size="mini" placeholder="mini"></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('')
</script>

注意： size 只在 type 不为 "textarea" 时有效。

前后缀图标

通过 prefix-icon 和 suffix-icon 属性设置输入框头部和尾部图标：

vue 复制代码 
<template>
  <div>
    <tiny-input :prefix-icon="TinyIconCalendar" v-model="value"></tiny-input>
    <tiny-input :suffix-icon="TinyIconCalendar" v-model="value"></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'
import { iconCalendar } from '@opentiny/vue-icon'

const TinyIconCalendar = iconCalendar()
const value = ref('')
</script>

插槽

通过插槽自定义输入框的前置、后置、头部、尾部内容，只对 type="text" 有效：

插槽名 说明
prepend 输入框前置内容（如 Http://）
append 输入框后置内容（如 .com）
prefix 输入框头部内容（如图标）
suffix 输入框尾部内容（如图标）
vue 复制代码 
<template>
  <div>
    <!-- 前置/后置文本 -->
    <tiny-input placeholder="请输入域名" v-model="input">
      <template #prepend>Http://</template>
    </tiny-input>
    <tiny-input placeholder="请输入域名" v-model="input">
      <template #append>.com</template>
    </tiny-input>

    <!-- 头部/尾部图标 -->
    <tiny-input placeholder="搜索" v-model="input">
      <template #prefix>
        <component :is="TinyIconSearch" />
      </template>
    </tiny-input>
    <tiny-input placeholder="日期" v-model="input">
      <template #suffix>
        <component :is="TinyIconCalendar" />
      </template>
    </tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'
import { iconSearch, iconCalendar } from '@opentiny/vue-icon'

const input = ref('')
const TinyIconSearch = iconSearch()
const TinyIconCalendar = iconCalendar()
</script>

文本域行数与宽度

通过 rows 设置文本域显示行数，通过 cols 设置文本域显示宽度，只在 type="textarea" 时有效：

vue 复制代码 
<template>
  <div>
    <tiny-input type="textarea" v-model="input" placeholder="默认行数"></tiny-input>
    <tiny-input type="textarea" v-model="input" :rows="1" placeholder="1行"></tiny-input>
    <tiny-input type="textarea" v-model="input" :cols="100" placeholder="宽度100列"></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('')
</script>

默认 rows 为 2。

可缩放与自适应文本域

缩放控制

通过 resize 属性控制文本域是否可被用户缩放，可选值：none、both、horizontal、vertical：

vue 复制代码 
<template>
  <div>
    <tiny-input type="textarea" v-model="input" resize="none" placeholder="不可缩放"></tiny-input>
    <tiny-input type="textarea" v-model="input" resize="both" placeholder="双向缩放"></tiny-input>
    <tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="水平缩放"></tiny-input>
    <tiny-input type="textarea" v-model="input" resize="vertical" placeholder="垂直缩放"></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('')
</script>

自适应高度

通过 autosize 属性设置文本域自适应内容高度，可传入对象指定最小和最大行数：

vue 复制代码 
<template>
  <div>
    <!-- 自适应，无限制 -->
    <tiny-input type="textarea" v-model="text" autosize placeholder="自适应高度"></tiny-input>

    <!-- 自适应，限制行数范围 -->
    <tiny-input
      type="textarea"
      v-model="text"
      :autosize="{ minRows: 2, maxRows: 6 }"
      placeholder="最少2行，最多6行"
    ></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const text = ref('')
</script>

悬浮展开

通过 hover-expand 属性设置文本域鼠标悬浮时展开/收起，建议搭配 autosize 一起使用：

vue 复制代码 
<template>
  <tiny-input
    type="textarea"
    v-model="text"
    :autosize="{ minRows: 6, maxRows: 10 }"
    hover-expand
    placeholder="悬浮展开查看更多"
  ></tiny-input>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const text = ref('')
</script>

输入字数统计

通过 show-word-limit 属性显示输入字数统计，需配合 maxlength 使用，只在 type="text" 或 type="textarea" 时有效：

vue 复制代码 
<template>
  <div>
    <tiny-input v-model="text" :maxlength="10" show-word-limit></tiny-input>
    <tiny-input type="textarea" v-model="textarea" :maxlength="20" show-word-limit></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const text = ref('')
const textarea = ref('')
</script>

计数器

通过 counter 属性显示输入框字符计数器：

vue 复制代码 
<template>
  <tiny-input v-model="input" counter></tiny-input>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('')
</script>

只读态

通过 display-only 属性设置输入框为只读态，通过 display-only-content 设置只读态显示的文本内容（未设置则使用 modelValue 的值）：

vue 复制代码 
<template>
  <div>
    <!-- 使用 display-only-content 指定只读文本 -->
    <tiny-input
      v-model="input"
      display-only
      display-only-content="自定义只读内容"
    ></tiny-input>

    <!-- 使用 modelValue 作为只读文本 -->
    <tiny-input v-model="input" display-only></tiny-input>

    <!-- 文本域只读 -->
    <tiny-input v-model="input" type="textarea" display-only></tiny-input>

    <!-- 文本域只读 + 自适应高度 -->
    <tiny-input v-model="input" type="textarea" display-only autosize></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('只读内容')
</script>

只读态悬浮提示

通过 show-tooltip 配置当文本超长时是否显示悬浮提示，默认为 true：

vue 复制代码 
<template>
  <tiny-input v-model="input" display-only :show-tooltip="false"></tiny-input>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('较长的只读文本内容')
</script>

文本域只读超出显示更多按钮

在只读的基础上增加 popup-more 属性，可使文本域超出时显示"更多"按钮，点击可查看详细信息：

vue 复制代码 
<template>
  <tiny-input
    v-model="input"
    type="textarea"
    display-only
    popup-more
  ></tiny-input>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('这是一段较长的文本内容，超出部分会显示更多按钮...')
</script>

掩码功能

通过 mask 属性启用掩码功能，只在 disabled 和 display-only 状态下生效，将内容显示为掩码（如 ***）：

vue 复制代码 
<template>
  <div>
    <tiny-input v-model="input" mask disabled></tiny-input>
    <tiny-input v-model="input" mask display-only></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('敏感信息内容')
</script>

注意： 不要将 mask 与 type="password" 和 show-password 一同使用。

边框模式

通过 input-box-type 属性设置边框模式，可选值：normal（默认，标准边框）、underline（下划线边框）：

vue 复制代码 
<template>
  <div>
    <tiny-input v-model="input" placeholder="标准边框"></tiny-input>
    <tiny-input v-model="input" placeholder="下划线边框" input-box-type="underline"></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('')
</script>

历史输入记忆

通过组件实例方法 addMemory 添加历史输入数据，输入完成后内容会被记住。通过 memory-space 属性配置最多可记录的条数（默认 5）：

vue 复制代码 
<template>
  <tiny-input
    ref="inputRef"
    v-model="input"
    name="myInput"
    placeholder="请输入内容"
    :memory-space="3"
    @change="onAddMemory"
  ></tiny-input>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('')
const inputRef = ref()

function onAddMemory(val) {
  inputRef.value.addMemory(val)
}
</script>

实例方法

通过 ref 获取组件实例后，可调用以下方法：

方法名 说明
focus() 使输入框获取焦点
blur() 使输入框失去焦点
select() 选中输入框中的文字
addMemory(value) 添加历史输入记忆
vue 复制代码 
<template>
  <div>
    <tiny-button @click="handleFocus">获取焦点</tiny-button>
    <tiny-button @click="handleBlur">失去焦点</tiny-button>
    <tiny-button @click="handleSelect">选中文字</tiny-button>
    <tiny-input ref="inputRef" v-model="input" placeholder="请输入内容"></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput, TinyButton } from '@opentiny/vue'

const input = ref('Hello TinyVue')
const inputRef = ref()

function handleFocus() {
  inputRef.value.focus()
}

function handleBlur() {
  inputRef.value.blur()
}

function handleSelect() {
  inputRef.value.select()
}
</script>

事件

事件名 回调参数 说明
input (event: InputEvent) 输入值时触发
change `(value: string number)`
blur (event: FocusEvent) 失去焦点时触发
focus (event: FocusEvent) 获取焦点时触发
clear - 点击清空按钮时触发
vue 复制代码 
<template>
  <div>
    <tiny-input v-model="value" placeholder="input, change" @input="onInput" @change="onChange"></tiny-input>
    <tiny-input v-model="value" placeholder="focus, blur" @focus="onFocus" @blur="onBlur"></tiny-input>
    <tiny-input v-model="value" placeholder="clear" clearable @clear="onClear"></tiny-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const value = ref('')

function onInput(e) {
  console.log('input 事件：', e)
}

function onChange(val) {
  console.log('change 事件：', val)
}

function onFocus(e) {
  console.log('focus 事件：', e)
}

function onBlur(e) {
  console.log('blur 事件：', e)
}

function onClear() {
  console.log('clear 事件触发')
}
</script>

表单校验

通过 validate-event 属性控制输入时是否触发表单校验（默认 true）。在表单中配合 trigger 配置校验触发方式：change 时值改变即触发，blur 时失焦后触发：

vue 复制代码 
<template>
  <tiny-form :model="formData" :rules="rules" label-width="80px">
    <tiny-form-item label="用户名" prop="name">
      <tiny-input v-model="formData.name" placeholder="请输入用户名"></tiny-input>
    </tiny-form-item>
  </tiny-form>
</template>

<script setup>
import { reactive } from 'vue'
import { TinyForm, TinyFormItem, TinyInput } from '@opentiny/vue'

const formData = reactive({ name: '' })
const rules = {
  name: [{ required: true, message: '请输入用户名', trigger: 'change' }]
}
</script>

如需禁用输入时触发表单校验，设置 validate-event 为 false。

原生属性

Input 组件支持透传原生 input 属性，如 name、readonly、autofocus、maxlength、min、max、step、tabindex、autocomplete 等：

vue 复制代码 
<template>
  <tiny-input
    v-model="input"
    name="username"
    readonly
    autofocus
    :maxlength="20"
    placeholder="原生属性示例"
  ></tiny-input>
</template>

<script setup>
import { ref } from 'vue'
import { TinyInput } from '@opentiny/vue'

const input = ref('')
</script>

API 参考

Props

属性名 类型 默认值 说明
autocomplete string 'off' 原生 autocomplete 属性
autofocus boolean false 页面加载时自动获取焦点
autosize `boolean { minRows: number, maxRows: number }` false
clearable boolean - 是否显示清除按钮（不适用于 textarea）
cols `string number` -
counter boolean false 是否显示字符计数器
custom-class string - 自定义样式类名
disabled boolean false 是否禁用
display-only boolean - 设置文本只读态
display-only-content string - 只读态显示的文本内容
height number - 文本域最小高度
hover-expand boolean - 文本域悬浮展开/收起（textarea 有效）
input-box-type `'normal' 'underline'` 'normal'
label string - 等价于原生 aria-label
mask boolean - 启用掩码功能（disabled/display-only 下生效）
maxlength number - 最大输入长度
memory-space number 5 历史记忆最大条目数
modelValue / v-model `string number` -
name string - 原生 name 属性
placeholder string - 占位文本
prefix-icon Component - 头部图标
readonly boolean false 是否只读
resize `'both' 'horizontal' 'vertical'
rows `string number` 2
show-password boolean false 是否显示密码切换图标
show-tooltip boolean true 只读态文本超出是否悬浮提示
show-word-limit boolean false 是否显示字数统计
size `'medium' 'small' 'mini'`
suffix-icon Component - 尾部图标
type `'text' 'textarea' 'password'
validate-event boolean true 输入时是否触发表单校验
popup-more boolean - 只读态超出显示更多按钮

Events

事件名 回调参数 说明
blur (event: FocusEvent) 失去焦点时触发
change `(value: string number)`
clear - 点击清空按钮时触发
focus (event: FocusEvent) 获取焦点时触发
input (event: InputEvent) 输入值时触发

Methods

方法名 返回值 说明
addMemory void 添加历史输入记忆
blur void 使输入框失去焦点
focus void 使输入框获取焦点
select void 选中输入框中的文字

Slots

插槽名 说明
prepend 输入框前置内容（type="text" 有效）
append 输入框后置内容（type="text" 有效）
prefix 输入框头部内容（type="text" 有效）
suffix 输入框尾部内容（type="text" 有效）

最佳实践

  1. 表单校验配合 ：将 Input 放在 Form 组件中使用，利用 validate-event 和 trigger 实现实时或失焦校验，提升用户体验。

  2. 密码安全 ：使用 type="password" + show-password 让用户可切换密码可见性，但不要与 mask 同时使用。

  3. 敏感信息掩码 ：对身份证号、手机号等敏感字段，在 disabled 或 display-only 状态下使用 mask 隐藏内容。

  4. 文本域自适应 ：长文本输入场景使用 autosize 配合 { minRows, maxRows } 限制高度范围，避免页面布局跳动。

  5. 字数限制 ：对有长度要求的输入（如备注、评论），使用 maxlength + show-word-limit 给用户实时反馈。

  6. 只读态优先 ：详情页、审批页等非编辑场景，使用 display-only 替代 disabled，视觉上更清晰地传达"只读"语义。

  7. 历史记忆 ：搜索框等高频输入场景，使用 addMemory 方法 + memory-space 属性实现输入历史记忆，提升操作效率。

  8. 下划线模式 ：在极简风格表单中，使用 input-box-type="underline" 去除左右边框，仅保留下划线，视觉更轻量。

OpenTiny NEXT 是一套企业智能前端开发解决方案，以生成式 UI 和 WebMCP 两大核心技术为基础，对现有传统的 TinyVue 组件库、TinyEngine 低代码引擎等产品进行智能化升级，构建出面向 Agent 应用的前端 NEXT-SDKs、AI Extension、TinyRobot智能助手、GenUI等新产品，实现AI理解用户意图自主完成任务，加速企业应用的智能化改造。

相关推荐
如果超人不会飞1 小时前
TinyVue Pager分页组件使用指南
前端·vue.js
大刚测试开发实战2 小时前
TestHub重磅更新！AI用例生成增加流式输出、Markdown文档上传、模型配置检测、AI评审开关控制...
vue.js·后端·github
可别3902 小时前
Vue 极简实现语音实时转写（录音转文字，低网络依赖、开箱即用）
前端·javascript·vue.js
阿猫的故乡2 小时前
Vue插槽从入门到项目实战：默认插槽、具名插槽、作用域插槽，一次讲明白
前端·javascript·vue.js
向日的葵0063 小时前
vue3路由的replace属性（四）
前端·javascript·vue.js·vue路由
阿猫的故乡3 小时前
Vue模板引用和组件暴露：ref拿DOM、defineExpose调方法，案例多到眼花
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员3 小时前
从Electron到Tauri，Rust+Vue(Tauri) 实现超高性能桌面日志应用开发，以及开发避坑指南
vue.js·rust·electron
you458015 小时前
学成在线--day02 CMS前端开发（含Vue基础知识得回顾）
前端·javascript·vue.js
xiaofeichaichai15 小时前
虚拟 DOM
前端·javascript·vue.js
热门推荐
01【AI】2026 年具身智能模型和世界模型总结02GitHub 镜像站点03Codex 下载安装指南：Windows 和 macOS 官方版下载042026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？06AI科技热点日报 | 2026年6月1日07【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法08《置身钉内》原文-可播放阅读09CC-Switch 下载、安装与使用配置指南【2026.5.29】10Agnes AI 全模态 API 免费实测报告：文生图 + 文生视频完整测试