Search使用说明

项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

Search参数

const props = {
  /**
   * 没有值的时候显示的内容
   */
  placeholder: '搜索',

  /**
   * 文字前面的图标IconName
   */
  iconName: 'sys-icon-sousuo',

  /**
   * 搜索框中的默认值
   */
  value: '111',

  /**
   * 初始状态时是否激活
   */
  active: false,

  /**
   * 设置隐藏
   */
  hidden: false,

  /**
   * 设置只读
   */
  readonly: false,

  /**
   * 不可用状态
   */
  disabled: false,

  /**
   * 只读
   */
  readonly:false,

  /**
   * 使用input的placeholder
   * 将placeholder传给原生<input>元素
   * 值为true时原生<input>和Search组件的包装都有placeholder，
   * 否则只有Search组件的包装有placeholder
   */
  useInputPlaceHolder:false,

  /**
   * 支持的事件
   */
  onClick: function (val) { console.log(val) },
  onBlur: function (val) { console.log(val) },
  onFocus: function (val) { console.log(val) },
  onChange: function (val) { console.log(val) },
  onKeyDown: function (val) { console.log(val) }
}

Search调用方法

1.安装npm组件包

npm install @beisen/search --save-dev

2.引用组件

import Search from "@beisen/search"

3. 传入参数

该参数为上述参数，传入方式使用: data={参数}

state= {
  SearchData :{
    "placeholder":"搜索"        /**没有值的时候显示的内容(string)**/
    ,"iconName":"icon-sousuo"     /**IconName 文字前面的图标**/
    ,"value":""  //搜索框中的默认值
    ,"active":true //input框激活
    ,"hidden":false             //隐藏搜索框
    ,"readonly":false           //搜索框只读
    ,"disabled":false           //搜索框禁用
    ,"onClick":function(val){console.log(val)}
    ,"onBlur":function(val){console.log(val)}
    ,"onFocus":function(val){console.log(val)}
    ,"onChange":function(val){console.log(val)}
  }
}
render () {
    return (
      <Search {...this.state.SearchData} />
    )
  }