v1.0.7

新增自动换行+隐藏图标

src/components/config/options.js

@@ -40,6 +40,8 @@ export default function (lan = 'zn') {
 		style: {},
 		//默认多选的高度
 		height: '200px',
+        //已选中数据是否自动换行显示
+        autoRow: false,
 		//是否开启分页
 		paging: false,
 		//分页每页的条数
@@ -94,6 +96,7 @@ export default function (lan = 'zn') {
 					}
 				},
 			},
+            icon: 'show',
 		},
 
 		// 展开下拉框

src/components/element/framework.js

@@ -40,7 +40,6 @@ class Framework extends Component{
 	value(sels, show){
 		let data = this.state.data;
 		let value = this.props.prop.value;
-		let direction = this.props.direction;
 
         let list = [];
         filterGroupOption(list, data, this.props.prop);
@@ -48,9 +47,6 @@ class Framework extends Component{
 			sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => list.find(item => item[value] == val)).filter(a => a),
 			//下拉框是否展开
 			show,
-			//下拉方向
-			direction,
-			directionVal: '',
 		})
 	}
 
@@ -79,28 +75,6 @@ class Framework extends Component{
 			//事件互斥原则, 打开一个多选, 关闭其他所有多选
 			this.props.onClose(this.props.el);
 
-			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 clientHeight = document.documentElement.clientHeight;
-				let rect = this.base.getBoundingClientRect();
-				let diff = clientHeight - (rect.y || rect.top) - rect.height - 20;
-				direction = diff > bodyViewHeight || (rect.y || rect.top) < diff ? 'down' : 'up';
-			}
-			this.setState({ directionVal: direction })
 		}else{
 			if(this.props.hide && this.props.hide() == false){
 				return;
@@ -119,6 +93,37 @@ class Framework extends Component{
         this.reset(props)
 	}
 
+    componentDidUpdate(){
+        let direction = this.props.direction;
+        let rect = this.base.getBoundingClientRect();
+        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 clientHeight = document.documentElement.clientHeight;
+        	let diff = clientHeight - (rect.y || rect.top) - rect.height - 20;
+        	direction = diff > bodyViewHeight || (rect.y || rect.top) < diff ? 'down' : 'up';
+        }
+
+        if(direction == 'down'){
+            this.bodyView.style.top = rect.height + 4 + 'px';
+            this.bodyView.style.bottom = 'auto';
+        }else{
+            this.bodyView.style.top = 'auto';
+            this.bodyView.style.bottom = rect.height + 4 + 'px';
+        }
+    }
+
 	render(config, { sels, show }) {
 		const { tips, theme, prop, style, radio, repeat, clickClose, on, max, maxMethod } = config;
 		const borderStyle = { borderColor: this.state.tmpColor || theme.color };
@@ -187,7 +192,7 @@ class Framework extends Component{
 		const labelProps = {  ...config, data: this.state.data, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
 		const bodyProps = {  ...config, data: this.state.data, sels, ck, show, onReset: this.onReset.bind(this) }
 		//控制下拉框的显示于隐藏
-		const bodyClass = ['xm-body', this.state.directionVal, show ? '' : 'dis'].join(' ');
+		const bodyClass = ['xm-body', show ? '' : 'dis'].join(' ');
 
 		return (
 			<xm-select { ...xmSelectProps } >

src/components/element/label.js

@@ -41,8 +41,8 @@ class Label extends Component{
         this.labelRef.onmousewheel = this.scrollFunc.bind(this);
     }
 
-	render({ data, prop, theme, model, sels }) {
-		//获取变换属性
+	render(config) {
+		const { data, prop, theme, model, sels, autoRow } = config;
 		const { name, disabled } = prop;
 
 		//获取配置项
@@ -92,9 +92,9 @@ class Label extends Component{
 			}
 		}
 
-
+        const className = ['xm-label', autoRow ? 'auto-row' : 'single-row'].join(' ');
 		return (
-			<div class="xm-label">
+			<div class={ className }>
 				<div class="scroll" ref={ ref => this.labelRef = ref }>
 					{ innerHTML ?
                         <div class="label-content" dangerouslySetInnerHTML={{__html: html}}></div> :

src/components/element/model/general.js

@@ -269,6 +269,7 @@ class General extends Component{
             </div>
         )
 
+        const showIcon = config.model.icon != 'hidden';
         const renderItem = item => {
             const selected = !!sels.find(sel => sel[value] == item[value])
             const iconStyle = selected ? {
@@ -278,12 +279,17 @@ class General extends Component{
             } : {
             	borderColor: theme.color,
             };
-            const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' ');
+            const itemStyle = {}
+            if(!showIcon && selected){
+                itemStyle.backgroundColor = theme.color;
+                item[disabled] && (itemStyle.backgroundColor = '#C2C2C2');
+            }
+            const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
             const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' ');
 
             return (
-            	<div class={ className } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
-            		<i class={ iconClass } style={ iconStyle }></i>
+            	<div class={ className } style={ itemStyle } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
+            		{ showIcon && <i class={ iconClass } style={ iconStyle }></i> }
             		<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
             	</div>
             )

src/style/index.less

@@ -3,6 +3,7 @@
 @disabledColor: #C2C2C2;
 @border: 1px solid @defaultBorderColor;
 @height: 36px;
+@heightLabel: 30px;
 
 @-webkit-keyframes xm-upbit {
 	from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3}
@@ -53,8 +54,8 @@ xm-select{
 	position: relative;
 	border: @border;
 	border-radius: 2px;
-	height: @height;
-	line-height: @height;
+	min-height: @height;
+    line-height: @height;
 	display: block;
 	width: 100%;
 	cursor: pointer;
@@ -93,22 +94,34 @@ xm-select{
 	}
 
 	& > .xm-label{
-		// padding: 0 30px 0 10px;
-		position: absolute;
-		top: 0;
-		bottom: 0px;
-		left: 10px;
-		right: 30px;
-		overflow: auto hidden;
+        &.single-row{
+            position: absolute;
+            top: 0;
+            bottom: 0px;
+            left: 0px;
+            right: 30px;
+            overflow: auto hidden;
+            .scroll{
+                overflow-y: hidden;
+            }
+            .label-content{
+                flex-wrap: nowrap;
+            }
+        }
+        &.auto-row{
+            .label-content{
+                flex-wrap: wrap;
+            }
+        }
 
 		.scroll{
-			overflow-y: hidden;
-
 			.label-content{
+                line-height: @heightLabel;
 				height: calc(100% - 20px);
 				display: flex;
 				align-items: baseline;
                 white-space: pre;
+                padding: 3px 30px 3px 10px;
 				&:after{
 					content: '-';
 					opacity: 0;
@@ -120,7 +133,7 @@ xm-select{
 			display: flex;
 			position: relative;
 			padding: 0px 5px;
-			margin-right: 5px;
+			margin: 2px 5px 2px 0;
 			height: 26px;
 			line-height: 26px;
 			border-radius: 3px;
@@ -208,7 +221,6 @@ xm-select{
 			&:hover{
 				background-color: #f2f2f2;
 			}
-
 			&-icon{
 				color: transparent;
 				display: flex;
@@ -222,7 +234,6 @@ xm-select{
 			&-icon.xm-icon-danx{
 				border-radius: 100%;
 			}
-
 			&-content{
 				display: flex;
 				position: relative;
@@ -233,6 +244,13 @@ xm-select{
 				color: @fontColor;
 				width: calc(100% - 20px);
 			}
+
+            &.hide-icon .xm-option-content{
+                padding-left: 0;
+            }
+            &.selected.hide-icon .xm-option-content{
+                color: #FFF !important;
+            }
 		}
 
 		.xm-select-empty{
@@ -391,9 +409,9 @@ xm-select{
 
 }
 
-// xm-select[ua='win']{
-// 	.xm-option-icon{
-// 		margin-top: 0px;
-// 		margin-bottom: -2px;
-// 	}
-// }
+//layui的一些样式兼容
+.layui-form-pane{
+    xm-select{
+        margin: -1px -1px -1px 0;
+    }
+}