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){
 | 
			
		||||
		//记录最新的配置项
 | 
			
		||||
		this.options = Object.assign(this.options, options);
 | 
			
		||||
		this.options = {...this.options, ...options};
 | 
			
		||||
		
 | 
			
		||||
		//如果dom不存在, 则不进行渲染事项
 | 
			
		||||
		let dom = selector(this.options.el);
 | 
			
		||||
 | 
			
		||||
@ -60,11 +60,24 @@ class Framework extends Component{
 | 
			
		||||
			
 | 
			
		||||
			let direction = this.state.direction;
 | 
			
		||||
			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 diff = bodyHeight - rect.y - rect.height - 20;
 | 
			
		||||
				direction = diff > 300 ? 'down' : 'up';
 | 
			
		||||
				let diff = clientHeight - (rect.y || rect.top) - rect.height - 20;
 | 
			
		||||
				direction = diff > bodyViewHeight || (rect.y || rect.top) < bodyViewHeight ? 'down' : 'up';
 | 
			
		||||
			}
 | 
			
		||||
			this.setState({ directionVal: direction })
 | 
			
		||||
		}else{
 | 
			
		||||
@ -72,7 +85,7 @@ class Framework extends Component{
 | 
			
		||||
				return;
 | 
			
		||||
			}
 | 
			
		||||
			//如果产生滚动条, 关闭下拉后回到顶部
 | 
			
		||||
			this.bodyView.scroll(0, 0);
 | 
			
		||||
			this.bodyView.scroll && this.bodyView.scroll(0, 0);
 | 
			
		||||
		}
 | 
			
		||||
		
 | 
			
		||||
		this.setState({ show });
 | 
			
		||||
 | 
			
		||||
@ -80,12 +80,14 @@ class General extends Component{
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
	componentWillReceiveProps(props){
 | 
			
		||||
		if(!props.show){
 | 
			
		||||
			//清空输入框的值
 | 
			
		||||
			this.setState({ searchVal: '' });
 | 
			
		||||
		}else{
 | 
			
		||||
			//聚焦输入框
 | 
			
		||||
			setTimeout(() => this.focus(), 0);
 | 
			
		||||
		if(this.props.show != props.show){
 | 
			
		||||
			if(!props.show){
 | 
			
		||||
				//清空输入框的值
 | 
			
		||||
				this.setState({ searchVal: '' });
 | 
			
		||||
			}else{
 | 
			
		||||
				//聚焦输入框
 | 
			
		||||
				setTimeout(() => this.focus(), 0);
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
 | 
			
		||||
@ -44,6 +44,9 @@ xm-select{
 | 
			
		||||
		color: @fontColor;
 | 
			
		||||
		text-overflow: ellipsis;
 | 
			
		||||
		user-select: none;
 | 
			
		||||
		-ms-user-select: none;
 | 
			
		||||
		-moz-user-select: none;
 | 
			
		||||
		-webkit-user-select: none;
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
	background-color: #FFF;
 | 
			
		||||
@ -120,8 +123,7 @@ xm-select{
 | 
			
		||||
			height: 26px;
 | 
			
		||||
			line-height: 26px;
 | 
			
		||||
			border-radius: 3px;
 | 
			
		||||
			vertical-align: middle;
 | 
			
		||||
			color: #FFF;
 | 
			
		||||
			align-items: baseline;
 | 
			
		||||
			
 | 
			
		||||
			& > span{
 | 
			
		||||
				display: flex;
 | 
			
		||||
@ -199,7 +201,7 @@ xm-select{
 | 
			
		||||
				white-space: nowrap;
 | 
			
		||||
				text-overflow: ellipsis;
 | 
			
		||||
				color: #666;
 | 
			
		||||
				width: 100%;
 | 
			
		||||
				width: calc(100% - 20px);
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		
 | 
			
		||||
@ -247,6 +249,7 @@ xm-select{
 | 
			
		||||
		.xm-paging{
 | 
			
		||||
			padding: 0 10px;
 | 
			
		||||
			display: flex;
 | 
			
		||||
			margin-top: 5px;
 | 
			
		||||
			
 | 
			
		||||
			&>span:first-child{
 | 
			
		||||
				border-radius: 2px 0 0 2px;
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user