Input 输入框

预览

01:38



---

组件名：rice-image

用户可以在文本框内输入或编辑文字。

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 v-model 绑定输入的值

<rice-input v-model="value" placeholder="请输入内容"/>

自定义类型

通过 type 可以指定 Input 输入类型，可选值见下方 Props

<rice-input v-model="number" type="number" placeholder="数字类型" />
<rice-input v-model="digit" type="digit" placeholder="小数类型" />
<rice-input v-model="password" type="password" placeholder="密码输入框" holdKeyboard/>

禁用输入框

设置 disabled 即可禁用输入框，readonly 设置了只读

<rice-input readonly placeholder="输入框只读" />
<rice-input disabled placeholder="输入框已禁用"/>

可清空内容

设置 clearable 属性可清空输入框的内容，clear-trigger 属性用来设置 清空图标显示的时机，默认为 focus 失去焦点时不显示， 可以设置为 always，输入框有值时就一直显示

<rice-input v-model="clearValue" clearable placeholder="可清空内容" />
<rice-input v-model="clearValue" clearable clear-trigger="always" placeholder="失去焦点时图标不消失" />

显示图标

prefix-icon 为前置图标， suffix-icon 为后置图标

<rice-input prefix-icon="info-fill" placeholder="前置图标" @clickLeftIcon="onClickLeftIcon"></rice-input>
<rice-input suffix-icon="help-fill" placeholder="后置图标"
  @clickRightIcon="onClickRightIcon"></rice-input>

插槽

可以通过插槽自定义输入框前后的内容

<rice-input placeholder="自定义插槽">
  <template #prefix>
    <rice-icon name="star" />
  </template>
  <template #suffix>
    <rice-button text="获取验证码" size="mini" type="primary" @click="getCode" />
  </template>
</rice-input>

API

Props

参数	类型	说明	默认值
model-value	String	输入框的值	-
type	String	输入框类型	-
disabled	Boolean	是否禁用	-
readonly	Boolean	是否只读，默认false，可选值：none、password、search、email、url、text、number、idcard、digit、tel、safe-password、nickname	text
placeholder	String	输入框为空时占位符	-
placeholder-style	String	指定 placeholder 的样式	-
maxlength	Number	最大输入长度，0和正数为合法值，非法值的时候不限制最大长度,默认-1，不限制	-
cursor-spacing	Number	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	-
cursor-color	String	指定光标颜色，Android的微信小程序非skyline下仅支持黑和绿，iOS版仅支持十六进制颜色值	-
auto-focus	Boolean	自动获取焦点，与focus属性对比，此属性只会首次生效	-
focus	Boolean	获取焦点	-
confirm-type	String	设置键盘右下角按钮的文字，仅在 type为text 时生效，可选值：done、send、search、next、go	done
confirm-hold	Boolean	点击键盘右下角按钮时是否保持键盘不收起	-
cursor	Number	指定focus时的光标位置	-
selection-start	Number	光标起始位置，自动聚集时有效，需与selection-end搭配使用	-
selection-end	Number	光标结束位置，自动聚集时有效，需与selection-satrt搭配使用	-
adjust-position	Boolean	键盘弹起时，是否自动上推页面,默认true	-
inputmode	String	是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示，仅支持web，默认会根据type自动适配	-
hold-keyboard	Boolean	focus时，点击页面的时候不收起键盘,默认false	-
color	String	输入框字体颜色	-
font-size	String|Number	输入框字体大小	-
border	String	输入框的边框，可选值：surround、bottom、none	surround
focus-border	String	聚焦时是否显示边框色	-
focus-border-color	String	聚焦时的边框色 to do	-
bg-color	String	背景颜色，默认透明	-
shape	String	输入框形状，可选值：square、round	square
height	String|Number	输入框的高度	-
clearable	Boolean	是否显示清除控件，默认false	-
clear-trigger	String	清空图标触发方式，仅在输入框有值时有效，可选值：always、focus	-
clear-icon	String	清除按钮的name值	-
show-password	Boolean	是否显示切换密码图标，默认true	-
show-password-trigger	String	显示密码图标触发方式，仅在输入框有值时有效，可选值：always、focus	-
prefix-icon	String	输入框前置图标	-
suffix-icon	String	输入框后置图标	-
icon-size	String|Number	前置/后置图标的大小	-
icon-color	String|Number	前置/后置图标的颜色	-
input-align	String	输入框对齐方式，默认left,可选 right	center
iput-style	Object	自定义input样式	-
custom-style	Object	自定义样式	-

Event

事件名	说明	回调参数
input	输入时触发	(value:string)
focus	输入框获得焦点时触发	(event: UniInputFocusEvent)
blur	输入框失去焦点时触发	(event: UniInputBlurEvent)
keyboardheightchange	键盘高度改变时触发	(event: UniInputKeyboardHeightChangeEvent)
change	非聚焦状态内容改变时触发（仅组件失去焦点时且用户输入改变内容才触发	(value: string)
confirm	点击完成按钮时触发	(value: string)
nicknamereview	输入框失去焦点时触发	(event: any)
clickLeftIcon	点击左侧图标时触发	-
clickRightIcon	点击右侧图标时触发	-

Slots

名称	说明
prefix	自定义左侧内容
suffix	自定义右侧内容

类型定义

组件导出如下类型

//组件类型
const iconRef=ref<RiceInputComponentPublicInstance|null>(null)