v1.0.1
调整IE不兼容的问题, 支持IE10以上
This commit is contained in:
parent
415cd9ac4d
commit
4c5d0dcccb
2
dist/xm-select.js
vendored
2
dist/xm-select.js
vendored
File diff suppressed because one or more lines are too long
@ -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);
|
||||||
|
@ -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 });
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user