v1.0.0.0727

1. 新增单选模式, {radio: true|false}
2. 新增重复选模式, {repeat: true|false}
3. 新增配置, 可以控制是否自动关闭下拉框, {clickClose: true|false}
4. 新增on方法, 可以监听已选择数据, data: {arr, item, selected}

src/components/config/options.js

@@ -30,6 +30,12 @@ export default function (lan = 'zn') {
 		direction: 'auto',
 		//自定义样式
 		style: {},
+		//是否开启单选模式
+		radio: false,
+		//是否开启重复选模式
+		repeat: false,
+		//是否点击选项后自动关闭下拉框
+		clickClose: false,
 		//自定义属性名称
 		prop: {
 			name: 'name',
@@ -71,8 +77,12 @@ export default function (lan = 'zn') {
 			
 		},
 		// 模板组成, 当前option数据, 已经选中的数据, name, value  
-		template(item, sels, name, value){
+		template({ item, sels, name, value }){
 			return name;
+		},
+		//监听选中事件
+		on({ arr, item, selected }){
+			
 		}
 	}
 }

src/components/core/index.js

@@ -38,7 +38,7 @@ class xmOptions {
 	 */
 	update(options = {}, isNew){
 		//记录最新的配置项
-		this.options = {...this.options, ...options};
+		this.options = Object.assign(this.options, options);
 		
 		//如果dom不存在, 则不进行渲染事项
 		let dom = selector(this.options.el);

src/components/element/framework.js

@@ -76,7 +76,7 @@ class Framework extends Component{
 	}
 	
 	render(config, { sels, show }) {
-		const { tips, theme, data, prop, template, model, empty, style } = config;
+		const { tips, theme, data, prop, template, model, empty, style, radio, repeat, clickClose, on } = config;
 		const borderStyle = { borderColor: theme.color };
 		//最外层边框的属性
 		const xmSelectProps = {
@@ -97,22 +97,31 @@ class Framework extends Component{
 		//普通多选数据
 		const valueProp = prop.value;
 		
-		const ck = (item, selected, disabled) => {
+		//选项, 选中状态, 禁用状态, 是否强制删除:在label上点击删除
+		const ck = (item, selected, disabled, mandatoryDelete) => {
 			//如果是禁用状态, 不能进行操作
 			if(disabled) return;
 			
 			//如果现在是选中状态
-			if(selected){
+			if(selected && (!repeat || mandatoryDelete)){
 				let index = sels.findIndex(sel => sel[valueProp] == item[valueProp])
 				if(index != -1){
 					sels.splice(index, 1);
 					this.setState(sels);
 				}
 			}else{
-				this.setState({
-					sels: [...sels, item]
-				})
+				//如果是单选模式
+				if(radio){
+					this.setState({ sels: [item] });
+				}else{
+					this.setState({ sels: [...sels, item] });
+				}
 			}
+			
+			on && on({ arr: sels, item, selected: !selected });
+
+			//检查是否为选择即关闭状态, 强制删除情况下不做处理
+			clickClose && !mandatoryDelete && this.onClick();
 		};
 		
 		const labelProps = {  ...config, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }

src/components/element/label.js

@@ -10,7 +10,7 @@ class Label extends Component{
 	}
 	
 	iconClick(item, selected, disabled, e){
-		this.props.ck(item, selected, disabled);
+		this.props.ck(item, selected, disabled, true);
 		//阻止父组件上的事件冒泡
 		e.stopPropagation();
 	}
@@ -58,7 +58,7 @@ class Label extends Component{
 			}
 		}else{
 			if(sels.length && conf && conf.template){
-				html = conf.template(data, sels);
+				html = conf.template({data, arr: sels});
 			}else{
 				html = sels.map(sel => sel[name]).join(',')
 			}

src/components/element/model/general.js

@@ -49,7 +49,7 @@ class General extends Component{
 					<div class="xm-option-icon" style={ { borderColor: theme.color, } }>
 						<i class="xm-iconfont xm-icon-duox" style={ iconStyle }></i>
 					</div>
-					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template(item, sels, item[name], item[value]) }}></div>
+					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
 				</div>
 			)
 		})