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

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 borderTop 属性设置是否显示上边框，bottomLeft 属性设置下边框left值。

<wui-input borderTop placeholder="请输入用户名"></wui-input>
<wui-input :bottomLeft="0" placeholder="请输入手机号码" maxlength="11"></wui-input>

带标题

通过 label 属性设置标题。

<wui-input label="标题" borderTop placeholder="这是一个输入框"></wui-input>
<wui-input label="标题文字" :bottomLeft="0" placeholder="请输入文本"></wui-input>

必填项

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

<wui-input required label="标题" borderTop placeholder="请输入文本"></wui-input>
<wui-input required label="标题文字" :bottomLeft="0" placeholder="请输入文本内容"></wui-input>

使用v-model

双向绑定。

<wui-input label="标题" :bottomLeft="0" borderTop placeholder="请输入文本" v-model="text"></wui-input>

Slots

插槽名称	说明
default	输入框右侧定义显示内容
left	输入框左侧自定义显示内容

Props

属性名	类型	说明	默认值	平台差异说明
required	Boolean	是否显示必填图标	false	-
requiredColor	String	必填图标颜色	#FF2B2B	-
label	String	左侧标题	-	-
labelSize	Number,String	标题字体大小，单位rpx	32	-
labelColor	String	标题字体颜色	#333	-
labelWidth	Number, String	标题最小宽度，单位rpx	140	-
clearable	Boolean	输入内容后是否显示清除按钮	false	-
clearColor	String	清除按钮颜色	#CCCCCC	-
focus	Boolean	获取焦点	false	在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。
placeholder	String	输入框为空时占位符	-	-
placeholderStyle	String	指定 placeholder 的样式	-	-
name	String	输入框名称	-	-
value	Number,String	输入框值，vue2使用	-	-
modelValue	Number,String	输入框值，vue3vue2请忽略	-	-
number	Boolean	输入框值做Number转化，vue2兼容写法，vue3可忽略	false	兼容v-model.number 在小程序平台值未转化成Number类型的问题
type	String	输入框类型，参考官方input (opens new window) 组件type属性	text	H5暂未支持动态切换，请使用 v-if 进行整体切换
password	Boolean	是否是密码类型	false	H5和App写此属性时，type失效
disabled	Boolean	是否禁用，清除按钮一并失效	false	-
readonly	Boolean	是否只读，保留清除按钮使用，优先级高于disabled	false	-
maxlength	Number, String	最大输入长度，设置为 -1 的时候不限制最大长度	140	-
min	Number, String	最小值，当number为true、type=number、type=digit 时有效	-	-
max	Number, String	最小值，当number为true、type=number、type=digit 时有效	-	-
cursorSpacing	Number	指定光标与键盘的距离，单位 px	0	App、微信小程序、百度小程序、QQ小程序
confirmType	String	设置键盘右下角按钮的文字，仅在 type="text" 时生效	done	微信小程序、App、H5
confirmHold	Boolean	点击键盘右下角按钮时是否保持键盘不收起	false	App、微信小程序、支付宝小程序、百度小程序、QQ小程序
cursor	Number	指定focus时的光标位置	-1	-
selectionStart	Number	光标起始位置，自动聚集时有效，需与selection-end搭配使用	-1	-
selectionEnd	Number	光标结束位置，自动聚集时有效，需与selection-start搭配使用	-1	-
adjustPosition	Boolean	键盘弹起时，是否自动上推页面	true	App-Android（vue 页面 softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序
holdKeyboard	Boolean	focus时，点击页面的时候不收起键盘	false	微信小程序2.8.2+
autoBlur	Boolean	键盘收起时，是否自动失去焦点	false	App 3.0.0+
alwaysEmbed	Boolean	强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)	false	微信小程序 2.10.4+
size	Number,String	输入框字体大小，单位 rpx	32	-
color	String	输入框字体颜色	#333	-
inputBorder	Boolean	是否显示input边框，为true则borderTop，borderBottom失效	false	-
isFillet	Boolean	input是否显示为圆角	false	-
radius	Number,String	自定义input圆角值，无边框时生效，单位rpx	-1	-
borderTop	Boolean	是否显示上边框	false	-
topLeft	Number, String	上边框left值，单位rpx	0	-
topRight	Number, String	上边框right值，单位rpx	0	-
borderBottom	Boolean	是否显示下边框	true	-
bottomLeft	Number, String	下边框left值，单位rpx	32	-
bottomRight	Number, String	下边框right值，单位rpx	0	-
borderColor	String	边框颜色，inputBorder为true时，非nvue端不生效	#EEEEEE	inputBorder为true时，仅nvue端支持，非nvue端边框颜色通过css变量（--wui-color-border）修改
trim	Boolean	是否自动去除两端的空格	true	-
textRight	Boolean	输入框内容是否右对齐显示	false	-
padding	Array	输入框padding值：[上,右,下,左]	['28rpx', '32rpx']	-
backgroundColor	String	输入框背景颜色	#FFFFFF	-
marginTop	Number,String	输入框margin-top值,单位rpx	0	-

Events

事件名	说明	回调参数
@input	当键盘输入时，触发input事件,vue2下可使用v-model指令	event=value
@update:modelValue vue3	用于组件的双向绑定,使用v-model指令即可	event=value
@focus	输入框聚焦时触发（仅微信小程序、App（2.2.3+） 、QQ小程序支持 height）	event.detail = { value, height }，height 为键盘高度
@blur	输入框失去焦点时触发	event.detail = {value}
@confirm	点击完成按钮时触发	event.detail = {value}
@click	点击输入框时触发	event={name}
@keyboardheightchange	键盘高度发生变化的时候触发此事件（微信小程序基础库2.7.0+、App 3.1.0+）	event={height: height, duration: duration}