1.0.0.0723
1.新增大数据量渲染测试 2.调整关闭下拉框时 滚动条返回顶部
This commit is contained in:
parent
daca16b503
commit
33df4d95d8
11
README.md
11
README.md
@ -171,6 +171,9 @@ xmSelect: setValue(array, show)
|
|||||||
<h3>自定义搜索延迟 和 提示</h3>
|
<h3>自定义搜索延迟 和 提示</h3>
|
||||||
<div id="demo16"></div>
|
<div id="demo16"></div>
|
||||||
|
|
||||||
|
<h3>1000条数据测试</h3>
|
||||||
|
<div id="demo17"></div>
|
||||||
|
|
||||||
|
|
||||||
<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
|
<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
@ -395,5 +398,13 @@ xmSelect: setValue(array, show)
|
|||||||
delay: 2000,
|
delay: 2000,
|
||||||
searchTips: '搜索呀 搜索呀...',
|
searchTips: '搜索呀 搜索呀...',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
var startTime = Date.now();
|
||||||
|
var demo17 = xmSelect.render({
|
||||||
|
el: '#demo17',
|
||||||
|
data: ''.padEnd(1000, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||||
|
filterable: true, //开启搜索
|
||||||
|
})
|
||||||
|
console.log('1000条数据渲染耗时: ' + (Date.now() - startTime) + 'ms');
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
2
dist/xm-select.js
vendored
2
dist/xm-select.js
vendored
File diff suppressed because one or more lines are too long
12
index.html
12
index.html
@ -63,6 +63,9 @@
|
|||||||
<h3>自定义搜索延迟 和 提示</h3>
|
<h3>自定义搜索延迟 和 提示</h3>
|
||||||
<div id="demo16"></div>
|
<div id="demo16"></div>
|
||||||
|
|
||||||
|
<h3>1000条数据测试</h3>
|
||||||
|
<div id="demo17"></div>
|
||||||
|
|
||||||
<script src="./dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
|
<script src="./dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
@ -287,6 +290,15 @@
|
|||||||
delay: 2000,
|
delay: 2000,
|
||||||
searchTips: '搜索呀 搜索呀...',
|
searchTips: '搜索呀 搜索呀...',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
var startTime = Date.now();
|
||||||
|
var demo17 = xmSelect.render({
|
||||||
|
el: '#demo17',
|
||||||
|
data: ''.padEnd(1000, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||||
|
filterable: true, //开启搜索
|
||||||
|
})
|
||||||
|
console.log('1000条数据渲染耗时: ' + (Date.now() - startTime) + 'ms');
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
@ -15,10 +15,6 @@ export default function (lan = 'zn') {
|
|||||||
tips: setting.tips,
|
tips: setting.tips,
|
||||||
//空数据提示
|
//空数据提示
|
||||||
empty: setting.empty,
|
empty: setting.empty,
|
||||||
//是否重置多选
|
|
||||||
reset: false,
|
|
||||||
//用来判断多选是否显示
|
|
||||||
isShow: false,
|
|
||||||
//搜索延迟 ms
|
//搜索延迟 ms
|
||||||
delay: 500,
|
delay: 500,
|
||||||
//搜索默认提示
|
//搜索默认提示
|
||||||
|
@ -30,13 +30,13 @@ class xmOptions {
|
|||||||
//定义默认值
|
//定义默认值
|
||||||
this.options = defaultOptions(options.language);
|
this.options = defaultOptions(options.language);
|
||||||
//开始渲染数据
|
//开始渲染数据
|
||||||
this.update(options);
|
this.update(options, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 更新数据 + 重新渲染
|
* 更新数据 + 重新渲染
|
||||||
*/
|
*/
|
||||||
update(options = {}){
|
update(options = {}, isNew){
|
||||||
//记录最新的配置项
|
//记录最新的配置项
|
||||||
this.options = {...this.options, ...options};
|
this.options = {...this.options, ...options};
|
||||||
|
|
||||||
@ -46,6 +46,9 @@ class xmOptions {
|
|||||||
warn(`没有找到渲染对象: ${options.el}, 请检查`)
|
warn(`没有找到渲染对象: ${options.el}, 请检查`)
|
||||||
return ;
|
return ;
|
||||||
}
|
}
|
||||||
|
//如果是历史渲染过的数据, 重置一下数据
|
||||||
|
isNew && childs[this.options.el] && childs[this.options.el].reset();
|
||||||
|
|
||||||
const onRef = (ref) => childs[this.options.el] = ref;
|
const onRef = (ref) => childs[this.options.el] = ref;
|
||||||
|
|
||||||
render(<Framework { ...this.options } onClose={ onClose } onRef={ onRef } />, dom);
|
render(<Framework { ...this.options } onClose={ onClose } onRef={ onRef } />, dom);
|
||||||
|
@ -9,6 +9,7 @@ class General extends Component{
|
|||||||
super(options);
|
super(options);
|
||||||
this.searchCid = 0;
|
this.searchCid = 0;
|
||||||
this.setState({ searchVal: '', });
|
this.setState({ searchVal: '', });
|
||||||
|
this.viewRef = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
optionClick(item, selected, disabled, e){
|
optionClick(item, selected, disabled, e){
|
||||||
@ -28,10 +29,17 @@ class General extends Component{
|
|||||||
|
|
||||||
componentWillReceiveProps(props){
|
componentWillReceiveProps(props){
|
||||||
if(!props.show){
|
if(!props.show){
|
||||||
this.setState({ searchVal: '', })
|
//清空输入框的值
|
||||||
|
this.setState({ searchVal: '', });
|
||||||
|
this.goTop();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
goTop(){
|
||||||
|
//返回顶部
|
||||||
|
this.viewRef.scrollIntoView(true);
|
||||||
|
}
|
||||||
|
|
||||||
render({ data, prop, template, theme, sels, empty, filterable, filterMethod, delay, searchTips }) {
|
render({ data, prop, template, theme, sels, empty, filterable, filterMethod, delay, searchTips }) {
|
||||||
|
|
||||||
const { name, value, disabled } = prop;
|
const { name, value, disabled } = prop;
|
||||||
@ -67,8 +75,12 @@ class General extends Component{
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
const onRef = (ref) => {
|
||||||
|
this.viewRef = ref;
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<div>
|
<div ref={ onRef }>
|
||||||
{ search }
|
{ search }
|
||||||
<div>{ arr }</div>
|
<div>{ arr }</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user