新增fixed布局

src/components/framework/index.js

@@ -31,11 +31,12 @@ class Framework extends Component{
 			show: false,
 			tmpColor: '',
 			bodyClass: '',
+			time: 0,
 		}
 	}
 
 	init(props, refresh){
-		let { data, prop, initValue, radio } = props, sels;
+		let { data, prop, initValue, radio, tree, cascader } = props, sels;
 		//如果新数据和旧数据不同 或者 强制刷新 才进行数据处理
 		if(refresh){
 			let dataObj = {};
@@ -47,6 +48,9 @@ class Framework extends Component{
 			}), dataObj)
 			if(radio && sels.length > 1){
 				sels = sels.slice(0, 1)
+				if(tree.show && tree.strict || cascader.show && cascader.strict){
+					this.clearAndReset(data, sels, false);
+				}
 			}
 			this.setState({ sels, dataObj, flatData });
 		}
@@ -139,14 +143,23 @@ class Framework extends Component{
 	}
 
 	clearAndReset(data, changeData, parentCK){
-		const { selected, children, value } = this.props.prop;
+		const { selected, disabled, children, value } = this.props.prop;
 		data.forEach(item => {
 			item[selected] = changeData.findIndex(c => c[value] === item[value]) != -1 || parentCK;
 			let child = item[children];
-			child && isArray(child) && this.clearAndReset(child, changeData, item[selected])
+			if(child && isArray(child)){
+				this.clearAndReset(child, changeData, item[selected])
+				let len = child.length;
+				let slen = child.filter(i => i[selected] === true || i.__node.selected === true).length;
+				item.__node.selected = slen === len;
+				item.__node.half = slen > 0 && slen < len || child.filter(i => i.__node.half === true).length > 0;
+				item.__node.disabled = child.filter(i => i[disabled] === true || i.__node.disabled === true).length === len;
+			}
 		})
 	}
 
+
+
 	load(data, dataObj, flatData, parent, level = 0, initValue){
 		const { prop, tree, cascader } = this.props;
 		const { children, optgroup, value, selected, disabled } = prop;
@@ -252,7 +265,7 @@ class Framework extends Component{
 	//选项, 选中状态, 禁用状态, 是否强制删除:在label上点击删除
 	itemClick(item, itemSelected, itemDisabled, mandatoryDelete){
 
-		const { theme, prop, radio, repeat, clickClose, max, maxMethod, tree } = this.props
+		const { theme, prop, radio, repeat, clickClose, max, maxMethod, tree, data } = this.props
 		let sels = [ ...this.state.sels ]
 		const { value, selected, disabled, children, optgroup } = prop
 
@@ -308,6 +321,7 @@ class Framework extends Component{
 				}else{
 					sels = [...sels, item]
 				}
+				this.clearAndReset(data, sels, itemSelected)
 				this.resetSelectValue(sels, [item], !itemSelected);
 			}
 		}
@@ -439,6 +453,20 @@ class Framework extends Component{
 		}
 	}
 
+	calcPosition(){
+		if(this.state.show && this.props.model.type === 'fixed'){
+			let rect = this.base.getBoundingClientRect();
+			(Date.now() - this.state.time > 10) && this.setState({ time: Date.now() })
+			return {
+				position: 'fixed',
+				left: rect.x,
+				top: rect.y + rect.height + 4,
+				width: rect.width,
+			}
+		}
+		return {};
+	}
+
 	//组件将要接收新属性
 	componentWillReceiveProps(props){
 		this.init(props, props.updateData);
@@ -482,6 +510,7 @@ class Framework extends Component{
 
 		//渲染组件
 		let Body = content ? <Custom { ...bodyProps } /> : tree.show ? <Tree { ...bodyProps } ref={ ref => this.treeRef = ref } /> : config.cascader.show ? <Cascader { ...bodyProps } /> : <General { ...bodyProps } ref={ ref => this.generalRef = ref } />;
+		let bodyStyle = this.calcPosition();
 
 		return (
 			<xm-select { ...xmSelectProps } >
@@ -495,7 +524,7 @@ class Framework extends Component{
 				<i class={ show ? 'xm-icon xm-icon-expand' : 'xm-icon' } />
 				{ sels.length === 0 && <div class="xm-tips">{ config.tips }</div> }
 				<Label { ...labelProps } ref={ ref => this.labelRef = ref } />
-				<div class={ ['xm-body', bodyClass, config.model.type, show ? '':'dis', ].join(' ') } ref={ ref => this.bodyView = ref}>
+				<div class={ ['xm-body', bodyClass, config.model.type, show ? '':'dis', ].join(' ') } style={ bodyStyle } ref={ ref => this.bodyView = ref}>
 					{ Body }
 				</div>
 				{ disabled && <div class="xm-select-disabled"></div> }
@@ -558,6 +587,10 @@ class Framework extends Component{
 			return ;
 		}
 
+		if(model.type === 'fixed'){
+			return ;
+		}
+
 		let rect = this.base.getBoundingClientRect();
 		if(direction === 'auto'){
 			//用于控制js获取下拉框的高度

src/components/label/index.js

@@ -104,7 +104,10 @@ class Label extends Component{
 			}
 		}else if(type == 'search'){
 			innerHTML = false;
-			let one = list[0][name];
+			let one = '';
+			if(list.length){
+				one = list[0][name]
+			}
 
 			html = (
 				<input class="label-search-input" type="text" placeholder={ config.searchTips } style={{ width: '100%', border: 'none' }} value={

src/components/plugin/general.js

@@ -286,8 +286,9 @@ class General extends Component{
 
 		//如果是分组模式, 要分页先去除分组, 然后在计算分页, 最后再加上分组
 		let groupInfo = {};
-		arr.filter(item => item[optgroup]).forEach(g => {
-			g[children].forEach(item => groupInfo[item[value]] = g);
+		arr.filter(item => item[optgroup]).forEach((g, groupIndex) => {
+			groupInfo[groupIndex] = g;
+			g[children].forEach(item => item.__group__index = groupIndex);
 		});
 		arr = arr.filter(item => !item[optgroup]);
 
@@ -342,7 +343,8 @@ class General extends Component{
 		let newArr = [], group, tmpGroup = { __tmp: true };
 		tmpGroup[optgroup] = true;
 		arr.forEach(item => {
-			let g = groupInfo[item[value]];
+			let g = groupInfo[item.__group__index];
+			delete item.__group__index;
 			if(group && !g){
 				g = tmpGroup
 			}

src/components/xm-select/index.js

@@ -262,6 +262,14 @@ class xmOptions {
 		let opt = this.options.dom.querySelector(`.xm-option[value="${ val }"]`);
 		opt && opt.scrollIntoView(false)
 		return this;
+	}
+	
+	/**
+	 * 重新计算下拉的位置
+	 */
+	calcPosition(){
+		childData[this.options.el].calcPosition()
+		return this;
 	}
 
 }

src/config/options.js

@@ -160,7 +160,7 @@ export default function (lan = 'zn') {
 				},
 			},
 			icon: 'show',
-			type: 'absolute',
+			type: 'absolute',//可选值， relative， fixed
 		},
 		//自定义选中的图标
 		iconfont: {

src/index.js

@@ -1,4 +1,4 @@
-import { name, version } from '../package.json'
+import { name, version, website } from '../package.json'
 import { selector, warn } from '@/common/util'
 import Select from '@/components/xm-select'
 
@@ -9,6 +9,7 @@ export const childData = {};
 export default {
 	name,
 	version,
+	doc: website,
 	render(options) {
 		let { el } = options;
 		options.dom = selector(el);
@@ -20,10 +21,10 @@ export default {
 			options.el = el;
 		}
 		optionData[el] = options;
-
+
 		let instance = new Select(options);
 		//已经渲染
-		if (instance && instance.__render_success) {
+		if (instance && instance.options.__render_success) {
 			datas[el] = instance;
 		}
 		return instance;

src/main.js

@@ -14,6 +14,16 @@ window.addEventListener('click', () => {
 		item && item.closed && item.closed()
 	})
 })
+
+/**
+ * 监听页面滚动事件
+ */
+window.addEventListener('scroll', () => {
+	Object.keys(datas).forEach(key => {
+		let item = datas[key]
+		item && item.calcPosition && item.calcPosition()
+	})
+})
 
 
 if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {

src/style/index.less

@@ -109,11 +109,13 @@ xm-select{
 			}
 			.label-content{
 				flex-wrap: nowrap;
+				white-space: nowrap;
 			}
 		}
 		&.auto-row{
 			.label-content{
 				flex-wrap: wrap;
+				padding-right: 30px !important;
 			}
 			.xm-label-block > span{
 				white-space: unset;
@@ -124,7 +126,7 @@ xm-select{
 		.scroll{
 			.label-content{
 				display: flex;
-				padding: 3px 30px 3px 10px;
+				padding: 3px 10px;
 			}
 		}