tui-input 输入框

介绍

输入框组件是对原生input组件的增强，内置了常用布局样式，同时包含 input 所有功能。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiInput from "@/components/thorui/tui-input/tui-input.vue"
export default {
	components:{
		tuiInput
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√	√

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-input": "/components/thorui/tui-input/tui-input"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

<tui-input placeholder="请输入姓名"></tui-input>

带标题

通过 label 属性设置标题。

<tui-input label="姓名" placeholder="请输入姓名"></tui-input>

带清除按钮

通过 clearable 属性设置是否带清除按钮。v-model 和 model:value 分别为uniapp端和微信小程序端数据的双向绑定。

<!--uni-app-->
<tui-input label="姓名" placeholder="请输入姓名" clearable v-model="name"></tui-input>

<!--微信小程序-->
<tui-input label="姓名" placeholder="请输入姓名" clearable model:value="{{name}}"></tui-input>

必填项

通过 required 属性设置是否显示必填标识。

<tui-input required label="姓名" placeholder="请输入姓名"></tui-input>

Slots

名称	说明
left	输入框左侧显示内容
right	输入框右侧显示内容

Props

参数	类型	说明	默认值
required	Boolean	是否显示必填标识（*号）	false
requiredColor	String	必填标识（*号）颜色	#EB0909
label	String	左侧标题	-
labelSize	Number	标题字体大小,单位rpx	32
labelColor	String	标题颜色	#333
labelWidth	Number	标题最小宽度，单位rpx	140
clearable	Boolean	输入内容后是否显示清除按钮	false
clearSize	Number	清除按钮大小，单位px	15
clearColor	String	清除按钮颜色	#bfbfbf
focus	Boolean	获取焦点	false
placeholder	String	输入框为空时占位符	-
placeholderStyle	String	指定 placeholder 的样式	-
name	String	输入框名称	-
value	Number,String	输入框的初始内容	-
modelValue V1.7.0+	Number,String	输入框的初始内容，vue3使用，代替value，仅uni-app端	-
type	String	与官方input type属性一致	text
password	Boolean	是否是密码类型	false
disabled	Boolean	是否禁用	false
maxlength	Number, String	最大输入长度，设置为 -1 的时候不限制最大长度	140
min V2.0+	Number, String	最小值，当type=number、digit时有效	NaN
max V2.0+	Number, String	最大值，当type=number、digit时有效	NaN
cursorSpacing	Number	指定光标与键盘的距离，单位 px 。与官方属性一致	0
confirmType	String	设置键盘右下角按钮的文字，仅在 type="text" 时生效。与官方属性一致	done
confirmHold	Boolean	点击键盘右下角按钮时是否保持键盘不收起。与官方属性一致	false
cursor	Number	指定focus时的光标位置。与官方属性一致	-1
selectionStart	Number	光标起始位置，自动聚集时有效，需与selection-end搭配使用。与官方属性一致	-1
selectionEnd	Number	光标结束位置，自动聚集时有效，需与selection-start搭配使用。与官方属性一致	-1
adjustPosition	Boolean	键盘弹起时，是否自动上推页面。与官方属性一致	true
holdKeyboard	Boolean	focus时，点击页面的时候不收起键盘。与官方属性一致	false
autoBlur	Boolean	键盘收起时，是否自动失去焦点。与官方属性一致	false
size	Number	输入框字体大小，单位rpx	32
color	String	输入框字体颜色	#333
inputBorder	Boolean	是否显示 input 边框	false
isFillet	Boolean	input是否显示为圆角	false
borderTop	Boolean	是否显示上边框	false
borderBottom	Boolean	是否显示下边框	true
lineLeft	Boolean	下边框线条是否有左偏移距离	true
trim	Boolean	是否自动去除内容两端的空格	true
textRight	Boolean	输入框内容是否右对齐显示	false
padding	String	输入框padding值	26rpx 30rpx
backgroundColor	String	输入框背景颜色	#FFFFFF
marginTop	Number	输入框margin-top值，单位rpx	0

Events

事件名	说明	回调参数
input	当键盘输入时，触发input事件	uni-app：event=value，微信小程序：event=event.detail = { value }
update:modelValue vue3	用于组件的双向绑定,使用v-model指令即可，仅uni-app	event=value
focus	输入框聚焦时触发	event.detail = { value, height }，height 为键盘高度
blur	输入框失去焦点时触发	event.detail = {value: value}
confirm	点击完成按钮时触发	event.detail = {value: value}
click	输入框点击事件	event = {name: name}
keyboardheightchange	键盘高度发生变化的时候触发此事件，与官方一致	event.detail = {height: height, duration: duration}

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码