调整IE不兼容的问题, 支持IE10以上
This commit is contained in:
maplemei 2019-09-23 15:46:57 +08:00
parent 415cd9ac4d
commit 4c5d0dcccb
5 changed files with 33 additions and 15 deletions

2
dist/xm-select.js vendored

File diff suppressed because one or more lines are too long

View File

@ -38,7 +38,7 @@ class xmOptions {
*/ */
update(options = {}, isNew){ update(options = {}, isNew){
//记录最新的配置项 //记录最新的配置项
this.options = Object.assign(this.options, options); this.options = {...this.options, ...options};
//如果dom不存在, 则不进行渲染事项 //如果dom不存在, 则不进行渲染事项
let dom = selector(this.options.el); let dom = selector(this.options.el);

View File

@ -60,11 +60,24 @@ class Framework extends Component{
let direction = this.state.direction; let direction = this.state.direction;
if(direction === 'auto'){ if(direction === 'auto'){
//用于控制js获取下拉框的高度
this.bodyView.style.display = 'block';
this.bodyView.style.visibility = 'hidden';
//获取下拉元素的高度
let bodyViewRect = this.bodyView.getBoundingClientRect();
let bodyViewHeight = bodyViewRect.height;
//还原控制效果
this.bodyView.style.display = '';
this.bodyView.style.visibility = '';
//确定下拉框是朝上还是朝下 //确定下拉框是朝上还是朝下
let bodyHeight = document.documentElement.clientHeight; let clientHeight = document.documentElement.clientHeight;
let rect = this.base.getBoundingClientRect(); let rect = this.base.getBoundingClientRect();
let diff = bodyHeight - rect.y - rect.height - 20; let diff = clientHeight - (rect.y || rect.top) - rect.height - 20;
direction = diff > 300 ? 'down' : 'up'; direction = diff > bodyViewHeight || (rect.y || rect.top) < bodyViewHeight ? 'down' : 'up';
} }
this.setState({ directionVal: direction }) this.setState({ directionVal: direction })
}else{ }else{
@ -72,7 +85,7 @@ class Framework extends Component{
return; return;
} }
//如果产生滚动条, 关闭下拉后回到顶部 //如果产生滚动条, 关闭下拉后回到顶部
this.bodyView.scroll(0, 0); this.bodyView.scroll && this.bodyView.scroll(0, 0);
} }
this.setState({ show }); this.setState({ show });

View File

@ -80,12 +80,14 @@ class General extends Component{
} }
componentWillReceiveProps(props){ componentWillReceiveProps(props){
if(!props.show){ if(this.props.show != props.show){
//清空输入框的值 if(!props.show){
this.setState({ searchVal: '' }); //清空输入框的值
}else{ this.setState({ searchVal: '' });
//聚焦输入框 }else{
setTimeout(() => this.focus(), 0); //聚焦输入框
setTimeout(() => this.focus(), 0);
}
} }
} }

View File

@ -44,6 +44,9 @@ xm-select{
color: @fontColor; color: @fontColor;
text-overflow: ellipsis; text-overflow: ellipsis;
user-select: none; user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
} }
background-color: #FFF; background-color: #FFF;
@ -120,8 +123,7 @@ xm-select{
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
border-radius: 3px; border-radius: 3px;
vertical-align: middle; align-items: baseline;
color: #FFF;
& > span{ & > span{
display: flex; display: flex;
@ -199,7 +201,7 @@ xm-select{
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
color: #666; color: #666;
width: 100%; width: calc(100% - 20px);
} }
} }
@ -247,6 +249,7 @@ xm-select{
.xm-paging{ .xm-paging{
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
margin-top: 5px;
&>span:first-child{ &>span:first-child{
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;