Search使用说明
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run dev (开发环境打包 port:8080)
-
npm run test (测试用例)
-
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"
- 传入参数
该参数为上述参数,传入方式使用: 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} />
)
}