@beisen/upaas-auto-complete

0.0.15 • Public • Published

UpaasAutoComplete

参数

State

  /**必传参数
  * @param {labelText} title 下拉按钮文本---必传
  * @param {status} 'edit' 编辑态还是搜索态
  */
  
  /**可选参数
  * @param {Boolean} hidden 显示或隐藏
  * @param {Boolean} disabled 是否禁用
  * @param {Boolean} readOnly 是否只读
  * @param {String} placeholder 'input框显示提示'
  * @param {String} inputDefaultValue input默认值
  * @param {array} defaultItems 二维数组数据 [['9999',"a啊啊啊"],['9999',"a啊啊啊"]]
  * @param {Boolean} showCloseBtn 是否带清楚按钮
  * @param {func} keyUpCallBack:(value, event) =>{} input keyup输入回调
  * @param {func} itemCallBack:(event, data) =>{}   autocomplete 点击回调
  * @param {func} focusCallBack:(value) =>{} input focus输入回调
  * @param {func} blurCallBack:(event) =>{} input blur输入回调
  * @param {func} changeCallBack:(event, data) =>{} input change输入回调
  */

demo

class App extends Component {

	constructor(props) {
		super(props)
		this.state = {
			autoValue: this.setDefaultValue(),
			defaultValue: 'aaaaaa'
		}
	}

	setDefaultValue(count = 5) {
		let items = [];
		if(count==3){
			return items;
		}else{
			for (let i = 0; i < count; i++) {
				items.push([i,i]);
			}
				items.push(['9999',"a啊啊啊"]);
			return items;
		}
	}	
	
	setNewValue(event, count) {
		this.setState({autoValue: this.setDefaultValue(parseInt(count))})
	}
	
	restValue(event, data) {
		this.setState({autoValue: []});
	}

	clearData = ()=> {
		this.setState({defaultValue:''})
	}

	render () {
		const {autoValue} = this.state;
		const options = {
			hidden: false,
			disabled: false,
			showCloseBtn: true,
			readOnly: false,
			status:'search',
			required: true,
			isFetching: false,
			showText: '请输入正确信息',
			errorStatus: false, //是否报错
    	errorMsg:"出错了~~~!", //报错信息
    	helpMsg:"qdwdqwd",
    	sideTip:false, //toolTip是否左右显示
  		hiddenTip:false, //toolTip是否显示
			labelText: 'UpaasAutoComplete', //左侧 label 文字
			placeholder: '', // input placeholder
			inputDefaultValue: '', // input 默认值
			defaultItems: [], // UpaasAutoComplete 数据 需传入一个DOM数组 nodeName为li
			// keyUpCallBack: (event, value) => console.log(event, value), // input keyup输入回调
			// itemCallBack: (event, data) => console.log(111), // UpaasAutoComplete 点击回调
			focusCallBack: (value) => console.log(value), // input keyup输入回调
			blurCallBack: (event) => console.log(event.target), // UpaasAutoComplete 点击回调
			changeCallBack: (event,value) => {console.log(event, value)}, // input keyup输入回调
		}
	    return (
	    	<div>
	     	 <UpaasAutoComplete {...options} defaultItems={autoValue} keyUpCallBack={::this.setNewValue} itemCallBack={::this.restValue} />
	    	</div>
	    )
  	}
}
render(<App />, document.getElementById('content'))

Package Sidebar

Install

npm i @beisen/upaas-auto-complete

Weekly Downloads

4

Version

0.0.15

License

ISC

Last publish

Collaborators

  • beisencorp