# 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-modelmodel: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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码