Skip to content

n-input 输入框 ​

view 为根装配 边框 / 尺寸 / 前缀与后缀插槽 / 清除与字数统计区,内部嵌原生 input 承接输入。组件根不是原生 input,v-model 由组件的双事件通道承接(update:modelValue 与 input 同参同发,库内受控组件统一模式):

html
<n-input v-model="val" />
  1. 值类型统一为 string(原生 input 的取值即字符串,type=number 也返回 string),数字场景由使用侧自行转换
  2. 默认宽度 100% 撑满所在容器(输入框的块级语义);与其它控件同行并列时用 custom-style 收窄或撑剩余(如 flex:1)
  3. 禁用不只是视觉:保色相降透明 + 透明拦截层盖住输入区,焦点与键入全部拦下,事件一律不触发
  4. 输入文字与占位符颜色由组件按深浅主题自动切换(App 端原生 input 的 class 色引用 CSS 变量不可靠,组件改为行内直达固定色值);color 可覆盖为任意固定色
  5. type 收录 uni-app x 官方全集(text / number / digit / tel / idcard / none / email / url / safe-password / nickname),平台差异见属性表;不支持的端回落文本键盘,行为与直接使用原生 input 一致
  6. 页面建议(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 / 元 等单位文字);位次最靠右(清除按钮、密码眼睛、字数统计之后),清除按钮出现/消失不会使其位移

记录 · 思考 · 创作