n-input 输入框
view 为根装配 边框 / 尺寸 / 前缀与后缀插槽 / 清除与字数统计区,内部嵌原生 input 承接输入。组件根不是原生 input,v-model 由组件的双事件通道承接(update:modelValue 与 input 同参同发,库内受控组件统一模式):
html
<n-input v-model="val" />
- 值类型统一为 string(原生 input 的取值即字符串,type=number 也返回 string),数字场景由使用侧自行转换
- 默认宽度 100% 撑满所在容器(输入框的块级语义);与其它控件同行并列时用 custom-style 收窄或撑剩余(如
flex:1)- 禁用不只是视觉:保色相降透明 + 透明拦截层盖住输入区,焦点与键入全部拦下,事件一律不触发
- 输入文字与占位符颜色由组件按深浅主题自动切换(App 端原生 input 的 class 色引用 CSS 变量不可靠,组件改为行内直达固定色值);
color可覆盖为任意固定色type收录 uni-app x 官方全集(text / number / digit / tel / idcard / none / email / url / safe-password / nickname),平台差异见属性表;不支持的端回落文本键盘,行为与直接使用原生 input 一致- 页面建议(App 端):在 pages.json 对应页面的 style 里配
"app-plus": { "softinputMode": "adjustResize" }——默认 adjustPan 是整体平移,页面滚到底时输入框贴近页面底部会被键盘盖住一部分;adjustResize 让键盘直接压缩窗口高度,任何位置的输入框都完整可见(组件无法替页面设置此项,需页面自行配置)
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| aria-label | Web 输入域的可访问名称 | String | "" | |
| model-value | 输入框的值;支持 v-model(update:modelValue 与 input 同参同发),也可 :model-value + @input 手动绑定 | String | "" | - |
| type | 键盘类型;type=number 取值仍为 string。三端全支持:text / number / digit / tel;部分端支持(不支持端回落文本键盘,与原生 input 一致):idcard 身份证(仅 H5/微信)、none 不弹软键盘 / email 邮箱 / url 网址(仅 App/H5,需 4.73+)、safe-password 密码安全键盘 / nickname 昵称键盘(仅微信) | String | text | text<br/>number<br/>digit<br/>tel<br/>idcard<br/>none<br/>email<br/>url<br/>safe-password<br/>nickname |
| password | 密码框(内容打码显示;明文切换可用 show-password-toggle 内置眼睛,或由使用侧自行切换本 prop) | Boolean | false | - |
| show-password-toggle | 内置密码明文切换:password = true 时尾部渲染眼睛图标,点击在明文/密文间切换(切换状态组件内自持、不派发事件) | Boolean | false | - |
| placeholder | 占位提示文字;留空时用内置多语言文案(简体中文"请输入") | String | "" | - |
| placeholder-style | 占位提示文字的行内样式,颜色默认跟随主题由组件下发 | String | "" | 与 css 相同 |
| maxlength | 最大输入长度,-1 为不限制 | Number | 140 | - |
| show-word-limit | 显示字数统计(右侧 n/max 形式;仅 maxlength > 0 时生效) | Boolean | false | - |
| clearable | 可清除:有内容且非禁用时显示清除按钮,点击清空值并发出 update:modelValue / input / clear 事件 | Boolean | false | - |
| disabled | 禁用(保色相降透明;透明拦截层盖住输入区拦截焦点与键入,事件一律不触发) | Boolean | false | - |
| focus | 自动获取焦点(置 true 聚焦;置回 false 不会主动收起键盘) | Boolean | false | - |
| confirm-type | 键盘确认键(右下角按钮)文字 | String | done | send<br/>search<br/>next<br/>go<br/>done |
| adjust-position | 键盘弹起时是否自动上推页面(原生避让机制,输入框在文档流内即可零配置避让)。仅特殊场景(自建聊天栏等自行处理避让)才需要关闭 | Boolean | true | - |
| cursor-spacing | 光标与键盘保持的距离(px):键盘弹起时原生上推量按此值计算;默认 20 保证整个输入框露出键盘上沿(原生默认 0 只保证光标线,输入框下半截会被盖住) | Number | 20 | - |
| size | 尺寸 | String | normal | large<br/>normal<br/>small |
| shape | 形状:square 8px 小圆角 / circle 全圆角胶囊 | String | square | square<br/>circle |
| border | 边框形态:surround 全边框 / bottom 下划线 / none 无边框(无边框时融入所在背景,适合内嵌表单卡片) | String | surround | surround<br/>bottom<br/>none |
| color | 输入文字颜色(留空随深浅主题自动切换;以行内样式直达,不受 App 端 input 类色变量不可靠问题影响) | String | "" | 与 css 相同 |
| input-style | 微调原生 input 的行内样式,如 "font-size:14px;text-align:center" | String | "" | 与 css 相同 |
| custom-class | 挂到根节点的额外 class(类需定义在组件样式表内) | String | "" | - |
| custom-style | 根节点行内样式 | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 与 input 同参同发(含清除按钮置空),v-model 绑定通道 | 最新值(String) |
| input | 每次键入或删除时实时触发(手动受控主通道:在回调里同步使用侧状态) | 最新值(String) |
| change | 输入内容有变化且失焦时触发(与聚焦时的值比较,无变化不触发) | 最终值(String) |
| focus | 输入框获得焦点时触发(禁用态不触发) | 事件对象 |
| blur | 输入框失去焦点时触发(禁用态不触发;change 在本事件之前发出) | 事件对象 |
| confirm | 点击键盘确认键(右下角按钮)时触发 | 事件对象 |
| keyboardheightchange | 键盘高度变化时触发(弹起/收起均发,height 为最新高度,收起为 0) | 事件对象(detail.height 为键盘高度) |
| clear | 点击清除按钮时触发(值已置空,update:modelValue 与 input 同步发出) | 事件对象 |
| prefixclick | 点击前缀插槽区时触发(禁用态不触发)——放扫码等动作图标时经此打开能力(如 uni.scanCode) | 事件对象 |
| suffixclick | 点击后缀插槽区时触发(禁用态不触发)——放搜索/执行等动作时经此触发 | 事件对象 |
插槽
| 插槽名 | 说明 |
|---|---|
| prefix | 输入框前缀区,内容不限(n-icon 动作图标、text 单位文字如 ¥ 等,组件负责与输入区的间距与垂直居中) |
| suffix | 输入框后缀扩展区,内容不限(搜索/查看密码等动作图标、kg / 元 等单位文字);位次最靠右(清除按钮、密码眼睛、字数统计之后),清除按钮出现/消失不会使其位移 |