H5 端 GlobalSearchInput（neoGlobalSearchInput）使用说明

一、组件概述

GlobalSearchInput 是 H5 端 全局搜索入口 组件，在页面上展示为 只读样式的搜索条，用户点击后跳转到 全局搜索页面。

可通过 neo-ui-component-h5 以 import 代码方式 在自定义组件中使用。

二、组件属性说明

GlobalSearchInputProps 在类型上允许扩展索引字段；业务侧常用属性如下。

属性名	类型	默认值	说明
render	Function	（必传）	必传，固定为 this.props.render 或 props.render，用于渲染 neoSearchBar
placeholder	string	kiwiIntl('neo.global.search', '全局搜索')	搜索条占位文案
backgroundColor	string	'#FFFFFF'	搜索条背景色

三、完整使用示例

说明

• 说明1：代码用法需从 neo-ui-component-h5 导入 GlobalSearchInput；
• 说明2：无需在项目中安装 neo-ui-component-h5；组件在 Neo 平台运行时会由平台注入该模块；
• 说明3：render 必须为框架注入的 this.props.render（类组件）或 props.render（函数组件），否则子 Schema 无法渲染。

示例 1：基础用法（默认占位与背景）

import * as React from 'react'
import { GlobalSearchInput } from 'neo-ui-component-h5'

interface Props {
  render: (name: string, schema: object) => React.ReactNode
}

export default class PageWithGlobalSearch extends React.Component<Props> {
  render() {
    return (
      <GlobalSearchInput render={this.props.render} />
    )
  }
}

示例 2：自定义占位文案与背景色

import * as React from 'react'
import { GlobalSearchInput } from 'neo-ui-component-h5'

export default class PageWithCustomSearchBar extends React.Component<{ render: any }> {
  render() {
    return (
      <GlobalSearchInput
        render={this.props.render}
        placeholder="搜索客户、商机..."
        backgroundColor="#F5F5F5"
      />
    )
  }
}