n-textarea 多行输入框
view 为根装配 边框 / 字数统计区 / 下划线与禁用拦截层,内部嵌原生 textarea 承接输入,外观与 n-input 同一套(内边距、圆角、字号、禁用透明度共用 --n-input-* 令牌)。组件根不是原生 textarea,v-model 由组件的双事件通道承接(update:modelValue 与 input 同参同发,库内受控组件统一模式):
html
<n-textarea v-model="val" />
- 值类型统一为 string,换行以
\n存于值内- 默认宽度 100% 撑满所在容器;高度由
height控制(默认 100px);auto-height开启后高度完全交给内容(原生接管,height不再生效——平台原生行为)- 字数统计是独立行贴在输入区下方右对齐(不悬浮在文字上,不盖最后一行字);仅
maxlength > 0时生效- 禁用不只是视觉:保色相降透明 + 透明拦截层盖住输入区,焦点与键入全部拦下,事件一律不触发
- 输入文字与占位符颜色由组件按深浅主题自动切换(App 端原生 textarea 的 class 色引用 CSS 变量不可靠,组件改为行内直达固定色值);
color可覆盖为任意固定色- 页面建议(App 端):在 pages.json 对应页面的 style 里配
"app-plus": { "softinputMode": "adjustResize" }——键盘直接压缩窗口高度,任何位置的输入框都完整可见(组件无法替页面设置此项,需页面自行配置)- 键盘默认只出键盘本体——确认/换行就在键盘右下角(小程序端也不出键盘上方的“完成”工具栏);需要那一栏时置
show-confirm-bar
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| model-value | 输入框的值,换行以 \n 存于值内;支持 v-model(update:modelValue 与 input 同参同发),也可 :model-value + @input 手动绑定 | String | "" | - |
| placeholder | 占位提示文字;留空时用内置多语言文案(简体中文"请输入内容") | String | "" | - |
| placeholder-style | 占位提示文字的行内样式,颜色默认跟随主题由组件下发 | String | "" | 与 css 相同 |
| maxlength | 最大输入长度,-1 为不限制 | Number | 140 | - |
| show-word-limit | 显示字数统计(底部右对齐 n/max 形式;仅 maxlength > 0 时生效) | Boolean | false | - |
| auto-height | 自动增高:开启后输入区高度完全由内容决定(原生接管,height 不再生效——平台原生行为);适合聊天框、动态表单等不定长录入 | Boolean | false | - |
| height | 输入区高度(px,不含边框与内边距);auto-height 开启时不生效(高度交给内容) | Number | 100 | - |
| size | 字号档位(16 / 15 / 13px,与 n-input 同源令牌);高度由 height 独立控制,两者正交 | String | normal | large<br/>normal<br/>small |
| border | 边框形态:surround 全边框 / bottom 下划线(聚焦时线变品牌色) / none 无边框(无边框时融入所在背景,适合内嵌表单卡片) | String | surround | surround<br/>bottom<br/>none |
| disabled | 禁用(保色相降透明;透明拦截层盖住输入区拦截焦点与键入,事件一律不触发) | Boolean | false | - |
| focus | 自动获取焦点(置 true 聚焦;置回 false 不会主动收起键盘) | Boolean | false | - |
| cursor | 指定聚焦时的光标位置(-1 不指定,由原生放在末尾;仅在聚焦瞬间生效,聚焦后修改无效) | Number | -1 | - |
| selection-start | 聚焦时选区起始位置(-1 不启用选区;需与 selection-end 搭配使用,仅在聚焦瞬间生效) | Number | -1 | - |
| selection-end | 聚焦时选区结束位置(-1 不启用选区;需与 selection-start 搭配使用,仅在聚焦瞬间生效) | Number | -1 | - |
| hold-keyboard | 聚焦时点击页面不收起键盘(聊天页点击消息列表、弹层内输入等防误触收起场景) | Boolean | false | - |
| adjust-keyboard-to | 微信键盘对齐 cursor 光标 / bottom 输入框底部;其他平台不绑定 | String | "cursor" | cursor / bottom |
| fixed | 微信中位于 position:fixed 容器时必须开启;其他平台不绑定 | Boolean | false | - |
| disable-default-padding | 移除微信 iOS 原生默认内边距 | Boolean | true | - |
| color | 输入文字颜色(留空随深浅主题自动切换;以行内样式直达,不受 App 端 textarea 类色变量不可靠问题影响) | String | "" | 与 css 相同 |
| confirm-type | 键盘确认键(右下角按钮)文字;默认 return 换行键——按下插入换行(多行输入主语义,真机键盘与开发者工具物理回车同源);改动作键则不插入换行、触发 confirm(done 同时收起键盘) | String | return | return<br/>send<br/>search<br/>next<br/>go<br/>done |
| confirm-hold | 点击确认键后保持键盘不收起(聊天、逐条录入等连续输入场景开启) | Boolean | false | - |
| show-confirm-bar | 键盘上方带“完成”按钮的工具栏(仅小程序端有此栏,App/H5 键盘本体自带确认键、本属性无效果);默认不出,确认/换行在键盘右下角本体上 | Boolean | false | - |
| adjust-position | 键盘弹起时是否自动上推页面(原生避让机制,输入框在文档流内即可零配置避让)。仅特殊场景(自建聊天栏等自行处理避让)才需要关闭 | Boolean | true | - |
| cursor-spacing | 光标与键盘保持的距离(px):键盘弹起时原生上推量按此值计算;默认 20 保证整个输入框露出键盘上沿(原生默认 0 只保证光标线) | Number | 20 | - |
| textarea-style | 微调原生 textarea 的行内样式,如 "font-size:16px;letter-spacing:1px" | String | "" | 与 css 相同 |
| custom-class | 挂到根节点的额外 class(类需定义在组件样式表内) | String | "" | - |
| custom-style | 根节点行内样式 | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 与 input 同参同发,v-model 绑定通道 | 最新值(String) |
| input | 每次键入或删除时实时触发(含换行符;手动受控主通道:在回调里同步使用侧状态) | 最新值(String) |
| change | 输入内容有变化且失焦时触发(与聚焦时的值比较,无变化不触发) | 最终值(String) |
| focus | 输入框获得焦点时触发(禁用态不触发) | 事件对象 |
| blur | 输入框失去焦点时触发(禁用态不触发;change 在本事件之前发出) | 事件对象 |
| confirm | 点击键盘确认键(右下角动作键)时触发(默认 return 换行键按下是插入换行、不触发本事件;改 done/send 等动作键后才触发) | 事件对象 |
| linechange | 输入框行数(内容高度)变化时触发,auto-height 增高场景可监听 | 事件对象(detail.height / heightRpx / lineCount) |
| keyboardheightchange | 键盘高度变化时触发(弹起/收起均发,height 为最新高度,收起为 0) | 事件对象(detail.height 为键盘高度) |
插槽
无。