v1.0.5

- 修复本地搜索模式下多次重复触发过滤方法, 优化搜索性能
- 修复选项过多时, 可以使用鼠标进行横向滚动

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## 更新日志
 
+### 1.0.5
+
+*2019-10-10*
+
+#### Bug fixes
+
+- 修复本地搜索模式下多次重复触发过滤方法, 优化搜索性能
+- 修复选项过多时, 可以使用鼠标进行横向滚动
+
+
 ### 1.0.4
 
 *2019-09-27*

docs/mds/ZTEST.md

@@ -0,0 +1,21 @@
+## 测试
+
+
+:::demo 
+```html
+
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    filterable: true,
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+    ],
+})
+</script>
+```
+:::

docs/router.js

@@ -75,6 +75,7 @@ export default [{
             { path: '/example-custom/ZM01', name: '赋值与取值', component: importMd('/ZM01') },
             { path: '/example-custom/ZM02', name: '表单提交', component: importMd('/ZM02') },
             // { path: '/example-custom/ZM03', name: '表格中多选', component: importMd('/ZM03') },
+            // { path: '/example-custom/ZTEST', name: '测试', component: importMd('/ZTEST') },
         ]
 	}, {
 		path: '/question',

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xm-select",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"description": "始于Layui的select多选解决方案",
 	"main": "index.js",
 	"scripts": {

src/components/element/label.js

@@ -15,6 +15,32 @@ class Label extends Component{
 		e.stopPropagation();
 	}
 
+    scrollFunc(e){
+        if(e.wheelDeltaX == 0){
+            let child = this.labelRef.getElementsByClassName('xm-label-block');
+            let sum   = 10;
+            for(let i = 0; i < child.length; i++){
+                sum += child[i].getBoundingClientRect().width + 5;
+            }
+            let width = this.labelRef.getBoundingClientRect().width;
+            let max   = sum > width ? sum - width : width;
+            let left  = this.labelRef.scrollLeft + e.deltaY;
+            left < 0   && (left = 0);
+            left > max && (left = max);
+            this.labelRef.scrollLeft = left;
+        }
+    }
+
+    componentDidMount(){
+        if (this.labelRef.addEventListener) {
+            this.labelRef.addEventListener('DOMMouseScroll', this.scrollFunc.bind(this), false);
+        }
+        if(this.labelRef.attachEvent){
+            this.labelRef.attachEvent('onmousewheel', this.scrollFunc.bind(this));
+        }
+        this.labelRef.onmousewheel = this.scrollFunc.bind(this);
+    }
+
 	render({ data, prop, theme, model, sels }) {
 		//获取变换属性
 		const { name, disabled } = prop;
@@ -69,7 +95,7 @@ class Label extends Component{
 
 		return (
 			<div class="xm-label">
-				<div class="scroll">    
+				<div class="scroll" ref={ ref => this.labelRef = ref }>
 					{ innerHTML ?
                         <div class="label-content" dangerouslySetInnerHTML={{__html: html}}></div> :
                         <div class="label-content">{ html }</div>

src/components/element/model/general.js

@@ -8,18 +8,18 @@ class General extends Component{
 
 	constructor(options){
 		super(options);
-		this.searchCid = 0;
+
 		this.setState({
-			searchValue: '',
 			filterValue: '',
 			remote: true,
 			loading: false,
 			pageIndex: 1,
 			pageSize: 10,
-
-			inputOver: true,
 		});
 
+        this.searchCid = 0;
+        this.inputOver = true;
+        this.__value = '';
 	}
 
 	optionClick(item, selected, disabled, e){
@@ -55,19 +55,19 @@ class General extends Component{
 
 	searchInput(e){
 		let v = e.target.value;
-        
+
-        if(v === this.state.searchValue){
+        if(v === this.__value){
             return ;
         }
 
         clearTimeout(this.searchCid);
-        if(this.state.inputOver){
+        if(this.inputOver){
             //保证输入框内的值是实时的
-            this.setState({ searchValue: v });
+            this.__value = v;
 
             //让搜索变成异步的
             this.searchCid = setTimeout(() => this.setState({
-                filterValue: this.state.searchValue,
+                filterValue: this.__value,
                 remote: true,
             }), this.props.delay);
         }
@@ -83,12 +83,12 @@ class General extends Component{
 
 	handleComposition(e){
 		let type = e.type;
-        
+
 		if(type === 'compositionstart'){
-			this.setState({ inputOver: false })
+			this.inputOver = false;
             clearTimeout(this.searchCid);
 		}else if(type === 'compositionend'){
-			this.setState({ inputOver: true })
+			this.inputOver = true;
             this.searchInput(e);
 		}
 	}
@@ -97,7 +97,9 @@ class General extends Component{
 		if(this.props.show != props.show){
 			if(!props.show){
 				//清空输入框的值
-				this.setState({ searchValue: '', filterValue: '' });
+				this.setState({ filterValue: '' });
+                this.__value = '';
+                this.searchInputRef && (this.searchInputRef.value = '');
 			}else{
 				//聚焦输入框
 				setTimeout(() => this.focus(), 0);
@@ -135,7 +137,7 @@ class General extends Component{
 		const search = (
 			<div class='xm-search'>
 				<i class="xm-iconfont xm-icon-sousuo"></i>
-				<input type="text" class="xm-input xm-search-input" placeholder={ searchTips } value={ this.state.searchValue }
+				<input type="text" class="xm-input xm-search-input" placeholder={ searchTips }
 					ref={ input => this.searchInputRef = input }
 					onClick={ this.blockClick.bind(this) }
                     onInput={ this.searchInput.bind(this) }

src/style/index.less

@@ -108,6 +108,7 @@ xm-select{
 				height: calc(100% - 20px);
 				display: flex;
 				align-items: baseline;
+                white-space: pre;
 				&:after{
 					content: '-';
 					opacity: 0;