diff --git a/CHANGELOG.md b/CHANGELOG.md index 3815c8c..7503443 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ ## 更新日志 +### 1.0.5 + +*2019-10-10* + +#### Bug fixes + +- 修复本地搜索模式下多次重复触发过滤方法, 优化搜索性能 +- 修复选项过多时, 可以使用鼠标进行横向滚动 + + ### 1.0.4 *2019-09-27* diff --git a/dist/static/2.js b/dist/static/2.js index 2854689..d21ff6b 100644 --- a/dist/static/2.js +++ b/dist/static/2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{361:function(e,t,n){e.exports=n.p+"static/wx.f391ad4.jpg"},363:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),n("demo-block",[n("div",[n("p",[e._v("目前仅支持"),n("code",[e._v("中文")]),e._v("和"),n("code",[e._v("英文")]),e._v(", 如需更多语言, 可以"),n("code",[e._v("clone")]),e._v("代码进行二次开发")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("
\n
\n\n +``` +::: diff --git a/docs/router.js b/docs/router.js index 6bff649..35aa18e 100644 --- a/docs/router.js +++ b/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', diff --git a/package.json b/package.json index ac8c3c6..9da570e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xm-select", - "version": "1.0.4", + "version": "1.0.5", "description": "始于Layui的select多选解决方案", "main": "index.js", "scripts": { diff --git a/src/components/element/label.js b/src/components/element/label.js index 80a78f2..649392a 100644 --- a/src/components/element/label.js +++ b/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 (
-
+
this.labelRef = ref }> { innerHTML ?
:
{ html }
diff --git a/src/components/element/model/general.js b/src/components/element/model/general.js index 7c797cc..9d7e05c 100644 --- a/src/components/element/model/general.js +++ b/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 = (
- this.searchInputRef = input } onClick={ this.blockClick.bind(this) } onInput={ this.searchInput.bind(this) } diff --git a/src/style/index.less b/src/style/index.less index bfea91f..2f2d823 100644 --- a/src/style/index.less +++ b/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; diff --git a/xm-select.zip b/xm-select.zip new file mode 100644 index 0000000..78a16c5 Binary files /dev/null and b/xm-select.zip differ