# t-input

Input 输入框

t-input 组件介绍

t-input 支持多种配置，包括前置图标、后置图标、清空输入、密码显示等功能。组件提供了丰富的属性，如绑定值、图标类名、是否显示边框等，可以根据不同需求进行定制。适用于各种表单场景，方便用户进行文本输入。

t-input 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-input 基础用法

基础用法参考 demo/input/input.uvue，通过 v-model 绑定输入值。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="Input 输入框"
				class="m-15"
				size="large"
				sub-title="支持多种配置，包括前置图标、后置图标、清空输入、密码显示等功能。组件提供了丰富的属性，如绑定值、图标类名、是否显示边框等，可以根据不同需求进行定制。适用于各种表单场景，方便用户进行文本输入。"></t-card>
		<t-card title="提示"
				class="mlrb-15"
				size="large"
				type="error"
				sub-title="官方input封装,type属性和框架冲突,input-type属性对应input的type"></t-card>
		<introduction title="主题-type">

			<t-button class="mb-15"
					  type="success"
					  @click="disabled=!disabled">{{disabled?'正常':'禁用'}}</t-button>
			<t-input class="mb-15"
					 placeholder="请输入内容"
					 :disabled="disabled"
					 v-model="inputVal"
					 prefix-icon="map"
					 suffix-icon="mic"></t-input>
			<t-input class="mb-15"
					 placeholder="请输入内容"
					 v-model="inputVal"
					 type="success"
					 :password="true"
					 size="large"></t-input>

			<t-input class="mb-15"
					 placeholder="请输入内容"
					 v-model="inputVal"
					 type="warning"></t-input>
			<t-input class="mb-15"
					 placeholder="请输入内容"
					 v-model="inputVal"
					 type="error"></t-input>
		</introduction>
		<introduction title="主题-size">
			<t-input class="mb-15"
					 placeholder="请输入内容"
					 v-model="inputVal"
					 size="large"
					 prefix-icon="map"
					 suffix-icon="mic"
					 type="success"></t-input>
			<t-input class="mb-15"
					 placeholder="请输入内容"
					 v-model="inputVal"
					 size="medium"
					 type="info"></t-input>
			<t-input class="mb-15"
					 placeholder="请输入内容"
					 v-model="inputVal"
					 size="small"
					 type="warning"></t-input>
			<t-input class="mb-15"
					 placeholder="请输入内容"
					 v-model="inputVal"
					 size="mini"
					 type="error"></t-input>
		</introduction>
		<introduction title="对齐方式">
			<t-input class="mb-15"
					 placeholder="请输入内容"
					 v-model="inputVal"
					 size="large"
					 input-class="sta-r"
					 prefix-icon="map"
					 suffix-icon="mic"
					 type="primary"></t-input>

		</introduction>
		<introduction title="自定义样式">
			<t-input class="mb-15 r-90!"
					 placeholder="请输入内容"
					 v-model="inputVal"
					 type="primary"
					 size="large"></t-input>
			<t-input class="mb-15"
					 placeholder="请输入内容"
					 input-type="number"
					 v-model="inputVal"
					 type="primary"
					 size="large"></t-input>
		</introduction>
	</view>
</template>

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

	const inputVal = ref('8151');
	const disabled = ref(false);

	const clear = () => {
		console.log('清除');
	}
</script>

t-input Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
modelValue	双向绑定的值	string	''
prefixIcon	前置图标名称	string	''
prefixClass	前置图标样式	string	''
suffixIcon	后置图标名称	string	''
suffixClass	后置图标样式	string	''
clearabled	是否显示清除按钮	boolean	false
clearIcon	清除按钮图标名称	string	'close'
clearClass	清除按钮样式	string	''
password	是否为密码输入框	boolean	false
eyeIcon	密码可见图标名称	string	'eye'
eyeOffIcon	密码不可见图标名称	string	'eye-off'
eyeClass	密码切换图标样式	string	''
name	输入框名称	string	''
inputType	输入框类型	string	'text'
placeholder	占位提示文字	string	''
placeholderstyle	占位文字样式	string	''
maxlength	最大输入长度	number	-1
cursorSpacing	光标与键盘的距离	number	0
autoFocus	是否自动聚焦	boolean	false
focus	是否聚焦	boolean	false
confirmType	键盘右下角按钮文字	string	'done'
inputClass	输入框样式	string	''

t-input Events

事件名	说明	回调参数
input	输入时触发	value: string
focus	聚焦时触发	-
blur	失焦时触发	-
confirm	点击键盘完成按钮时触发	-
keyboardheightchange	键盘高度变化时触发	-
click	点击时触发	-
clear	清除时触发	-
update:modelValue	双向绑定值更新时触发	value: string

t-input Slots

插槽名	说明
left	左侧内容插槽，默认显示前置图标
right	右侧内容插槽，默认显示后置图标