1.0.0.0725

1.修改返回顶部页面会颤抖的问题
2.新增下拉框可视范围内自动向上
3.新增自定义样式

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>
 ```

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>

src/components/config/options.js

@@ -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',

src/components/element/framework.js

@@ -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>

src/components/element/model/general.js

@@ -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>

src/style/index.less

@@ -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;