1.0.0.0725
1.修改返回顶部页面会颤抖的问题 2.新增下拉框可视范围内自动向上 3.新增自定义样式
This commit is contained in:
maplemei
parent
33df4d95d8
commit
ba563c67c4
47
README.md
47
README.md
@ -47,6 +47,10 @@ QQ群: 769620939
|
||||
if(!val) return true;
|
||||
return item[prop.name].indexOf(val) != -1;
|
||||
},
|
||||
//下拉方向
|
||||
direction: 'auto', //auto, down, up
|
||||
//自定义样式
|
||||
style: {},
|
||||
//自定义属性名称
|
||||
prop: {
|
||||
name: 'name',
|
||||
@ -174,6 +178,18 @@ xmSelect: setValue(array, show)
|
||||
<h3>1000条数据测试</h3>
|
||||
<div id="demo17"></div>
|
||||
|
||||
<h3>自动判断下拉方向</h3>
|
||||
<div id="demo18"></div>
|
||||
|
||||
<h3>只会往下</h3>
|
||||
<div id="demo19"></div>
|
||||
|
||||
<h3>只会往上</h3>
|
||||
<div id="demo20"></div>
|
||||
|
||||
<h3>自定义style样式</h3>
|
||||
<div id="demo21"></div>
|
||||
|
||||
|
||||
<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
@ -406,5 +422,36 @@ xmSelect: setValue(array, show)
|
||||
filterable: true, //开启搜索
|
||||
})
|
||||
console.log('1000条数据渲染耗时: ' + (Date.now() - startTime) + 'ms');
|
||||
|
||||
var demo18 = xmSelect.render({
|
||||
el: '#demo18',
|
||||
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||
filterable: true, //开启搜索
|
||||
direction: 'auto',
|
||||
})
|
||||
|
||||
var demo19 = xmSelect.render({
|
||||
el: '#demo19',
|
||||
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||
filterable: true, //开启搜索
|
||||
direction: 'down',
|
||||
})
|
||||
|
||||
var demo20 = xmSelect.render({
|
||||
el: '#demo20',
|
||||
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||
filterable: true, //开启搜索
|
||||
direction: 'up',
|
||||
})
|
||||
|
||||
var demo21 = xmSelect.render({
|
||||
el: '#demo21',
|
||||
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||
filterable: true, //开启搜索
|
||||
style: {
|
||||
width: '200px',
|
||||
marginLeft: '20px',
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
2
dist/xm-select.js
vendored
2
dist/xm-select.js
vendored
File diff suppressed because one or more lines are too long
45
index.html
45
index.html
@ -64,7 +64,19 @@
|
||||
<div id="demo16"></div>
|
||||
|
||||
<h3>1000条数据测试</h3>
|
||||
<div id="demo17"></div>
|
||||
<div id="demo17"></div>
|
||||
|
||||
<h3>自动判断下拉方向</h3>
|
||||
<div id="demo18"></div>
|
||||
|
||||
<h3>只会往下</h3>
|
||||
<div id="demo19"></div>
|
||||
|
||||
<h3>只会往上</h3>
|
||||
<div id="demo20"></div>
|
||||
|
||||
<h3>自定义style样式</h3>
|
||||
<div id="demo21"></div>
|
||||
|
||||
<script src="./dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
@ -299,6 +311,37 @@
|
||||
})
|
||||
console.log('1000条数据渲染耗时: ' + (Date.now() - startTime) + 'ms');
|
||||
|
||||
var demo18 = xmSelect.render({
|
||||
el: '#demo18',
|
||||
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||
filterable: true, //开启搜索
|
||||
direction: 'auto',
|
||||
})
|
||||
|
||||
var demo19 = xmSelect.render({
|
||||
el: '#demo19',
|
||||
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||
filterable: true, //开启搜索
|
||||
direction: 'down',
|
||||
})
|
||||
|
||||
var demo20 = xmSelect.render({
|
||||
el: '#demo20',
|
||||
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||
filterable: true, //开启搜索
|
||||
direction: 'up',
|
||||
})
|
||||
|
||||
var demo21 = xmSelect.render({
|
||||
el: '#demo21',
|
||||
data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
|
||||
filterable: true, //开启搜索
|
||||
style: {
|
||||
width: '200px',
|
||||
marginLeft: '20px',
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -26,6 +26,10 @@ export default function (lan = 'zn') {
|
||||
if(!val) return true;
|
||||
return item[prop.name].indexOf(val) != -1;
|
||||
},
|
||||
//下拉方向
|
||||
direction: 'auto',
|
||||
//自定义样式
|
||||
style: {},
|
||||
//自定义属性名称
|
||||
prop: {
|
||||
name: 'name',
|
||||
|
||||
@ -16,6 +16,7 @@ class Framework extends Component{
|
||||
this.reset();
|
||||
//回传子组件
|
||||
this.props.onRef(this);
|
||||
this.bodyView = null;
|
||||
}
|
||||
|
||||
reset(){
|
||||
@ -26,10 +27,14 @@ class Framework extends Component{
|
||||
value(sels, show){
|
||||
let data = this.props.data;
|
||||
let value = this.props.prop.value;
|
||||
let direction = this.props.direction;
|
||||
this.setState({
|
||||
sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => data.find(item => item[value] == val)).filter(a => a),
|
||||
//下拉框是否展开
|
||||
show
|
||||
show,
|
||||
//下拉方向
|
||||
direction,
|
||||
directionVal: '',
|
||||
})
|
||||
}
|
||||
|
||||
@ -42,13 +47,26 @@ class Framework extends Component{
|
||||
}
|
||||
//事件互斥原则, 打开一个多选, 关闭其他所有多选
|
||||
this.props.onClose(this.props.el);
|
||||
|
||||
let direction = this.state.direction;
|
||||
if(direction === 'auto'){
|
||||
//确定下拉框是朝上还是朝下
|
||||
let bodyHeight = document.documentElement.clientHeight;
|
||||
let rect = this.base.getBoundingClientRect();
|
||||
let diff = bodyHeight - rect.y - rect.height - 20;
|
||||
direction = diff > 300 ? 'down' : 'up';
|
||||
}
|
||||
this.setState({ directionVal: direction })
|
||||
}else{
|
||||
if(this.props.hidn && this.props.hidn() == false){
|
||||
return;
|
||||
}
|
||||
//如果产生滚动条, 关闭下拉后回到顶部
|
||||
this.bodyView.scroll(0, 0);
|
||||
}
|
||||
|
||||
this.setState({ show })
|
||||
this.setState({ show });
|
||||
|
||||
//阻止其他绑定事件的冒泡
|
||||
e && e.stopPropagation();
|
||||
}
|
||||
@ -58,11 +76,14 @@ class Framework extends Component{
|
||||
}
|
||||
|
||||
render(config, { sels, show }) {
|
||||
const { tips, theme, data, prop, template, model, empty } = config;
|
||||
const { tips, theme, data, prop, template, model, empty, style } = config;
|
||||
const borderStyle = { borderColor: theme.color };
|
||||
//最外层边框的属性
|
||||
const xmSelectProps = {
|
||||
style: show ? borderStyle : '',
|
||||
style: {
|
||||
...style,
|
||||
...(show ? borderStyle : {})
|
||||
},
|
||||
onClick: this.onClick.bind(this)
|
||||
}
|
||||
//右边下拉箭头的变化class
|
||||
@ -97,14 +118,14 @@ class Framework extends Component{
|
||||
const labelProps = { ...config, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
|
||||
const bodyProps = { ...config, sels, ck, show }
|
||||
//控制下拉框的显示于隐藏
|
||||
const bodyClass = show ? 'xm-body' : 'xm-body dis';
|
||||
const bodyClass = ['xm-body', this.state.directionVal, show ? '' : 'dis'].join(' ');
|
||||
|
||||
return (
|
||||
<xm-select { ...xmSelectProps }>
|
||||
<xm-select { ...xmSelectProps } >
|
||||
<i class={ iconClass } />
|
||||
<Tips { ...tipsProps } />
|
||||
<Label { ...labelProps } />
|
||||
<div class={ bodyClass }>
|
||||
<div class={ bodyClass } ref={ ref => this.bodyView = ref}>
|
||||
<General { ...bodyProps } />
|
||||
</div>
|
||||
</xm-select>
|
||||
|
||||
@ -9,7 +9,6 @@ class General extends Component{
|
||||
super(options);
|
||||
this.searchCid = 0;
|
||||
this.setState({ searchVal: '', });
|
||||
this.viewRef = null;
|
||||
}
|
||||
|
||||
optionClick(item, selected, disabled, e){
|
||||
@ -31,15 +30,9 @@ class General extends Component{
|
||||
if(!props.show){
|
||||
//清空输入框的值
|
||||
this.setState({ searchVal: '', });
|
||||
this.goTop();
|
||||
}
|
||||
}
|
||||
|
||||
goTop(){
|
||||
//返回顶部
|
||||
this.viewRef.scrollIntoView(true);
|
||||
}
|
||||
|
||||
render({ data, prop, template, theme, sels, empty, filterable, filterMethod, delay, searchTips }) {
|
||||
|
||||
const { name, value, disabled } = prop;
|
||||
@ -75,12 +68,8 @@ class General extends Component{
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
const onRef = (ref) => {
|
||||
this.viewRef = ref;
|
||||
};
|
||||
return (
|
||||
<div ref={ onRef }>
|
||||
<div>
|
||||
{ search }
|
||||
<div>{ arr }</div>
|
||||
</div>
|
||||
|
||||
@ -129,6 +129,11 @@ xm-select{
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
|
||||
&.up{
|
||||
top: auto;
|
||||
bottom: 42px;
|
||||
}
|
||||
|
||||
.xm-option{
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user