n-search 搜索框
灰底圆角搜索条：放大镜图标 + 单行输入 + 一键清除 + 右侧动作按钮，键盘右下角固定为搜索键。内嵌原生 input 承接输入，受控模式与 n-input 同构（v-model 即用）。
- 零配置即用：
<n-search v-model="keyword" @search="onSearch" />；占位文字与动作按钮文字内置多语言（简体中文"请输入搜索" / "搜索"）- 右侧动作按钮：点击发
custom事件并自动收起键盘——按钮文字可换"取消"，跳真实搜索页形态用disabled（点击发click事件）- 前置分类：
label（商品 / 店铺等分类词，点击发labelclick可挂分类菜单）；清除按钮有值即现，搜索图标可换位右缘
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
如何调用
html
<n-search v-model="keyword" @search="onSearch" />API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| model-value | 输入框的值；支持 v-model（update:modelValue 与 input 同参同发），也可 :model-value + @input 手动绑定 | String | "" | - |
| placeholder | 占位提示文字；留空时用内置多语言文案（简体中文"请输入搜索"） | String | "" | - |
| placeholder-style | 占位提示文字的行内样式，颜色默认跟随主题由组件下发 | String | "" | 与 css 相同 |
| maxlength | 最大输入长度，-1 为不限制（搜索词无自然上限，默认不限） | Number | -1 | - |
| clearable | 可清除：有内容且非禁用时显示清除按钮，点击清空值并发出 update:modelValue / input / clear 事件 | Boolean | true | - |
| disabled | 禁用（保色相降透明；透明拦截层盖住输入区拦截焦点与键入，此时点击发 click 事件——静态入口跳搜索页形态） | Boolean | false | - |
| focus | 自动获取焦点（置 true 聚焦；置回 false 不会主动收起键盘） | Boolean | false | - |
| shape | 形状：round 全圆角胶囊（搜索框主流形态）/ square 小圆角 | String | round | round<br/>square |
| label | 输入区左侧的前置文字（商品 / 店铺等分类词，点击整区发 labelclick 事件可挂分类菜单） | String | "" | - |
| search-icon | 搜索图标名称（n-icon 内置图标名）；空串关闭图标 | String | search | - |
| search-icon-size | 搜索图标字号（px） | Number | 16 | - |
| icon-position | 搜索图标位置：left 输入区左侧 / right 输入区右缘 | String | left | left<br/>right |
| show-action | 是否显示右侧动作按钮（「搜索 / 取消」类动作，点击发 custom 事件并收起键盘） | Boolean | true | - |
| action-text | 右侧动作按钮文字；留空时用内置多语言文案（简体中文"搜索"） | String | "" | - |
| adjust-position | 键盘弹起时是否自动上推页面（原生避让机制，输入框在文档流内即可零配置避让）。仅特殊场景（自建聊天栏等自行处理避让）才需要关闭 | Boolean | true | - |
| cursor-spacing | 光标与键盘保持的距离（px）：键盘弹起时原生上推量按此值计算；默认 20 保证整个输入框露出键盘上沿 | Number | 20 | - |
| 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） |
| search | 点击键盘搜索键（右下角）或回车时触发，触发后自动收起键盘 | 当前输入值（String） |
| custom | 点击右侧动作按钮时触发，触发后自动收起键盘（「搜索 / 取消」类动作入口） | 当前输入值（String） |
| clear | 点击清除按钮时触发（值已置空，update:modelValue 与 input 同步发出） | 事件对象 |
| focus | 输入框获得焦点时触发（禁用态不触发） | 事件对象 |
| blur | 输入框失去焦点时触发（禁用态不触发；change 在本事件之前发出） | 事件对象 |
| keyboardheightchange | 键盘高度变化时触发（弹起/收起均发，height 为最新高度，收起为 0） | 事件对象（detail.height 为键盘高度） |
| click | 禁用态点击组件时触发——搜索框作静态入口跳转真实搜索页的形态（非禁用态不触发） | 事件对象 |
| clickicon | 点击搜索图标时触发，触发后自动收起键盘（图标作搜索执行入口） | 当前输入值（String） |
| labelclick | 点击前置分类区时触发——经此打开分类菜单（label 挂分类选择的场景） | 事件对象 |
插槽
| 插槽名 | 说明 |
|---|---|
| label | 前置分类区整段覆盖（默认渲染 label prop 文字；放下拉分类控件时经 labelclick 事件挂菜单） |
| icon | 搜索图标位整段覆盖（默认渲染 search-icon prop 指定的 n-icon；多色 / 品牌图标在此放） |
| right | 输入容器右缘扩展区（语音 / 扫码等动作图标，与输入区的间距由组件负责） |
| action | 右侧动作按钮整段覆盖（默认渲染 action-text prop 文字；放图标按钮或胶囊时在此放） |
主题令牌
| 令牌 | 默认值 | 说明 |
|---|---|---|
| --n-search-bg | var(--n-bg-2) | 输入容器底色（缺省挂全局表面色，深浅主题自动切换） |
| --n-search-height | 40px | 搜索框高度（字段同步取高） |
| --n-search-padding-x | 12px | 输入容器水平内边距 |
| --n-search-gap | 8px | 图标 / 清除区 / 右缘插槽与输入区的间距 |
| --n-search-radius | 8px | square 形态圆角 |
| --n-search-radius-circle | 999px | round 形态全圆角 |
| --n-search-font-size | 15px | 输入文字与图标字号 |
| --n-search-label-margin | 12px | 前置分类区与输入容器的间距 |
| --n-search-action-margin | 12px | 右侧动作按钮与输入容器的间距 |
| --n-search-disabled-opacity | 0.5 | 禁用态整体降透明幅度 |
同名的 SCSS 覆盖变量（$n-search-height 等）支持编译期覆盖，用法见库 readme「样式与主题的引入规则」。
实现说明
- 受控与事件同 n-input：内部 input 用 :value + @input，update:modelValue 与 input 同参同发；change 为失焦值变化语义（与聚焦时快照对比）。search / custom / clickicon 的参数直接给当前输入值（搜索场景要的就是词，原生事件对象无增量信息）。
- 禁用不绑原生 disabled：保色相整体降透明 + 透明拦截层盖住输入区（焦点进不来、键盘弹不出），点击根节点发 click 事件承接「跳真实搜索页」形态；focus prop 同步做守卫。
- 清除按钮常驻宽度折叠：clearable 开启期间不插拔节点（App 端动态插拔不即时重绘），显隐走容器 0↔24px 宽度折叠 + 字形 scale/opacity 双通道，宽度翻转由 flex 输入区吸收。
- 键盘收起联动：search（键盘搜索键）/ custom（动作按钮）/ clickicon（图标点击）触发后自动 uni.hideKeyboard()——键盘挡住后续页面反馈。
- 输入文字与占位符色行走内：原生 input 上 class color 引用 CSS 变量在 App 端不可靠，按深浅主题算出具体色值后行内直达（color prop 可覆盖）。
- 图标位置走元素级变体：iconPosition=left 时图标位是输入区前的元素，right 时是右缘插槽之后的独立元素（清除按钮更靠左）——两处整段 v-if 变体、绑定完全一致，翻转随装配位 key 重建根节点（uvue 的 App 端不支持 CSS order）。
取舍记录（对照参考实现）
| 能力 | 取舍 | 理由 |
|---|---|---|
| 输入框 / 占位标签双态切换（点占位标签才出输入框） | 不收 | 该机制为「focus 属性不支持的平台」兜底的兼容包袱，uni-app x 全端 input focus 可用 |
| 右侧取消 / 搜索双按钮随值切换 | 不收 | 双按钮切换依赖占位标签双态；单动作按钮 + action-text 自定义（"取消"）覆盖等价场景 |
| 动作按钮聚焦展开动画 | 不收 | 弱需求；本库组件动画统一 JS 帧循环驱动，为按钮展开引入整条动画链路成本不成比例 |
| 输入框文字对齐（input-align） | 不收 | input-style 行内样式可达（如 "text-align:center"），不设重复通道 |
| 组件级外边距 / 容器背景与内边距 | 不收 | 库内红线：组件零外距，搜索条所在页面的背景与留白归使用方（custom-style 可直达） |
| 键盘失焦自动收起（auto-blur） | 不收 | 失焦场景用 uni.hideKeyboard 主动收；本组件在 search / custom / clickicon 后已自动收 |
| 高度自定义 prop（height） | 走令牌 | 单一 40px 令牌（--n-search-height）+ custom-style 覆盖，不设重复通道 |
| 搜索图标色 / 动作按钮色 prop | 走令牌 | 图标色与占位符同链（主题算色），按钮色走品牌色令牌；特殊配色用插槽覆盖 |
| 输入容器描边色（borderColor） | 不收 | 灰底胶囊主流形态靠与页面底色的色差区分边界、不加描边；白底描边的表单形态归 n-input |
| 动作按钮样式（actionStyle） | 不收 | #action 插槽整段覆盖（放图标按钮 / 胶囊等任意形态），比样式串通道表达力完整 |
| 占位符类名（placeholderClass） | 不收 | 样式隔离下页面类打不进组件内部，placeholder-style 行内样式是可靠直达通道 |
| 复位实例方法（reset 清空并收键盘） | 不收 | 等价操作是 v-model 置空 + uni.hideKeyboard() 两行调用方代码；组件无占位标签双态机，无内部状态需要复位 |
| 清除按钮仅聚焦时显示 | 不收 | 有值即现更直接（聚焦条件在真机上反而难满足：点清除时输入框先失焦） |