Input (输入框)

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

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page>
		<t-card title="Input 输入框" main-class="m-30" size="l"
			sub-title="支持多种配置，包括前置图标、后置图标、清空输入、密码显示等功能。组件提供了丰富的属性，如绑定值、图标类名、是否显示边框等，可以根据不同需求进行定制。适用于各种表单场景，方便用户进行文本输入。"></t-card>
		<t-card title="提示" main-class="mlrb-30" size="l" type="e"
			sub-title="官方input封装,type属性和框架冲突,input-type属性对应input的type"></t-card>
		<introduction title="主题-type">
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" :disabled="disabled"
				@clear="clear">默认按钮</t-input>
			<t-button main-class="mb-30" type="success" @click="disabled=!disabled">{{disabled?'正常':'禁用'}}</t-button>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" prefix-icon="map" suffix-icon="mic"
				type="primary"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" type="success" :password="true"
				size="l"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" type="info"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" type="warning"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" type="error"></t-input>
		</introduction>
		<introduction title="主题-effect">
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" prefix-icon="map" suffix-icon="mic"
				effect="normal" type="primary"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" effect="dark" type="success"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" effect="disabled" type="info"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" effect="light" type="warning"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" effect="plain" :border="true"
				type="warning"></t-input>
		</introduction>
		<introduction title="主题-size">
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" size="large" prefix-icon="map"
				suffix-icon="mic" type="success"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" size="medium" type="info"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" size="small" type="warning"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" v-model="inputVal" size="mini" type="error"></t-input>
		</introduction>
		<introduction title="对齐方式">
			<t-input main-class="mb-30 sta-r" placeholder="请输入内容" v-model="inputVal" size="large" prefix-icon="map"
				suffix-icon="mic" type="p"></t-input>
			
		</introduction>
		<introduction title="自定义样式">
			<t-input main-class="mb-30 r-180" placeholder="请输入内容" v-model="inputVal" type="p" size="l"></t-input>
			<t-input main-class="mb-30" placeholder="请输入内容" input-type="number" v-model="inputVal" type="p"
				size="l"></t-input>
		</introduction>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				inputVal: '8151',
				disabled: false
			};
		},
		methods: {
			clear() {
				console.log('清除')
			}
		}
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
modelValue	String	``	双向绑定的值
prefixIcon	String	``	前置图标名称
prefixClass	String	``	前置图标样式
suffixIcon	String	``	后置图标名称
suffixClass	String	``	后置图标样式
clearIcon	String	closes-circle-line	清空图标按钮名称
clearClass	String	``	清空图标样式
eyeIcon	String	eye-line	显示密码图标名称
eyeOffIcon	String	eye-off-line	隐藏密码图标名称
eyeClass	String	s.35	密码图标的样式
inputClass	String	``	输入框的样式
password	Boolean	false	是否密码显示
clearabled	Boolean	true	是否显示清空按钮
border	Boolean	false	是否显示边框
name	String	``	组件的名称 如果用官方表单组件需要使用到它
inputType	String	text	input的类型，对应官方input组件的type属性	text: 文本输入键盘 number: 数字输入键盘 idcard: 身份证输入键盘 digit: 带小数点数字输入键盘 tel: 电话输入键盘 safe-password: 密码安全输入键盘 nickname: 昵称输入键盘
placeholder	String	``	输入框为空时占位符
placeholderStyle	String	``	指定 placeholder 的样式
placeholderClass	String	``	placeholder-class
maxlength	Number	1	最大输入长度，0和正数为合法值，非法值的时候不限制最大长度
cursorSpacing	Number	1	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
cursorColor	String	``	指定光标颜色
autoFocus	Boolean	false	自动获取焦点，与focus属性对比，此属性只会首次生效。
confirmType	String	done	设置键盘右下角按钮的文字，仅在 type为text 时生效。	send: 发送 search: 搜索 next: 下一个 go: 前往 done: 完成
alwaysEmbed	Boolean	false	强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
confirmHold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起
cursor	Number	1	指定focus时的光标位置
selectionStart	Number	1	光标起始位置，自动聚集时有效，需与selection-end搭配使用
selectionEnd	Number	1	光标结束位置，自动聚集时有效，需与selection-satrt搭配使用
adjustPosition	Boolean	true	键盘弹起时，是否自动上推页面
textContentType	String	``	文本区域的语义，根据类型自动填充	oneTimeCode: 一次性验证码
holdKeyboard	Boolean	false	focus时，点击页面的时候不收起键盘
safePasswordCertPath	String	``	安全键盘加密公钥的路径，只支持包内路径
safePasswordLength	Number	1	安全键盘输入密码长度
safePasswordTimeStamp	Number	1	安全键盘加密时间戳
safePasswordNonce	String	``	安全键盘加密盐值
safePasswordSalt	String	``	安全键盘计算 hash 盐值，若指定custom-hash 则无效
safePasswordCustomHash	String	``	安全键盘计算 hash 的算法表达式
randomNumber	Boolean	false	当 type 为 number, digit, idcard 数字键盘是否随机排列
controlled	Boolean	false	是否为受控组件。为 true 时，value 内容会完全受 setData 控制
alwaysSystem	Boolean	false	是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效
inputmode	String	text	是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。	none: 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 text: 使用用户本地区域设置的标准文本输入键盘。 decimal: 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 numeric: 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 tel: 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 。 search: 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 email: 为邮件地址输入优化的虚拟键盘，通常包含""符号和其他优化。表单里面的邮件地址输入应该使用 。 url: 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 。
disableForm	Boolean	false	是否禁用表单验证

事件

名称	返回参数	说明
clear	-	清空文本时触发
click	(e : UniPointerEvent)	-
input	(event: UniInputEvent) => void	当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
blur	(event: UniInputBlurEvent) => void	输入框失去焦点时触发，event.detail =
focus	(event: UniInputFocusEvent) => void	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
keyboardheightchange	(event: UniInputKeyboardHeightChangeEvent) => void	键盘高度发生变化的时候触发此事件，event.detail =
confirm	(event: UniInputConfirmEvent) => void	点击完成按钮时触发，event.detail =
prefixClick	-	点击前置图标时触发
suffixClick	-	点击后置图标时触发

插槽

名称	返回值	说明
name	-