# Input 输入框

通过键盘输入字符。

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

注意

Input 为受控组件,它总会显示 Vue 绑定值。 通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。

  • confirm-type 参数仅仅为type="text"时候生效,uniapp 不支持

# 示例

# 基础用法

<pi-input v-model="name" />
1

# 禁用状态

通过 disabled 属性指定是否禁用 input 组件。

<pi-input v-model="name" disabled />
1

# 密码输入框

通过 password 属性可以变成一个隐藏值的密码框

<pi-input v-model="name" password />
1

# 输入框类型

  • 通过 type 设置输入框的类型,可通过设置type属性切换5种类型,分别为:
  • textarea : 长文本内容。
  • text : 普通文本。
  • number : 数字。
  • idcard : 身份证号码。
  • digit : 带小数点的数字键盘。

idcard 仅支持微信、支付宝、百度、QQ小程序;digit 支持微信、支付宝、百度、头条、QQ小程序。

<pi-input v-model="textarea" type="textarea" />
<pi-input v-model="text" type="text" />
<pi-input v-model="number" type="number" />
<pi-input v-model="idcard" type="idcard" />
<pi-input v-model="digit" type="digit" />
1
2
3
4
5

# 输入长度限制

maxlength 和 minlength 是原生属性,用来限制输入框的字符长度,其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框。 -1表示无限制。

<pi-input v-model="text" maxlength="10"  />
<pi-input v-model="textarea" type="textarea" maxlength="30"  />
1
2

# API

# Input Props

名称 描述 类型 必选 默认值
value 初始值 false -
customStyle 自定义样式 Object false -
customClass 自定义样式类 String false -
type 输入框类型 'textarea', 'text', 'number', 'idcard', 'digit' String false -
password 是否是密码类型 Boolean false false
placeholder - String false ''
disabled - Boolean false false
maxlength - Number | String false -1
placeholderStyle - String false color: #c0c4cc; font-weight: 400;
confirmType - String false done
focus 是否自动获得焦点 Boolean false false
cursorSpacing 指定光标与键盘的距离,单位 px Number | String false 0
selectionStart 光标起始位置,自动聚焦时有效,需与selection-end搭配使用 Number | String false -1
selectionEnd 光标结束位置,自动聚焦时有效,需与selection-start搭配使用 Number | String false -1
showConfirmbar 是否显示键盘上方带有”完成“按钮那一栏 Boolean false true

# Input Events

事件名 描述 参数
input 输入内容 -
focus 获得焦点 -
blur 失去焦点 -
confirm 输入完成事件 -
Last updated: 2022/5/31 上午11:51:27
10:44