From 6feee42b470f4e1c334e6b43c8beed113527f98c Mon Sep 17 00:00:00 2001 From: maplemei Date: Fri, 27 Sep 2019 19:10:51 +0800 Subject: [PATCH] v1.0.4 --- CHANGELOG.md | 19 ++- dist/static/2.js | 2 +- dist/static/3.js | 2 +- dist/static/docs.js | 8 +- dist/xm-select.js | 2 +- docs/mds/XM18.md | 70 ++++++++ docs/mds/XM19.md | 111 +++++++++++++ docs/mds/ZM01.md | 99 ++++++++++++ docs/mds/ZM02.md | 50 ++++++ docs/mds/install.md | 2 +- docs/mds/options.md | 48 +++++- docs/mds/question.md | 11 +- docs/router.js | 11 ++ package.json | 4 +- src/components/common/util.js | 204 +++++++++++++++++------- src/components/config/options.js | 28 +++- src/components/core/index.js | 35 ++-- src/components/element/framework.js | 101 +++++++----- src/components/element/header.js | 0 src/components/element/model/general.js | 178 +++++++++++++-------- src/style/index.less | 137 +++++++++++----- 21 files changed, 871 insertions(+), 251 deletions(-) create mode 100644 docs/mds/XM18.md create mode 100644 docs/mds/XM19.md create mode 100644 docs/mds/ZM01.md create mode 100644 docs/mds/ZM02.md delete mode 100644 src/components/element/header.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 2094bf2..3815c8c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,22 @@ ## 更新日志 +### 1.0.4 + +*2019-09-27* + +#### 新增 + +- 新增多选上限设置, 可以设置多选选中上限 +- 新增工具条, 可以全选, 清空, 自定义 +- 新增name设置, 可以表单提交, 隐藏input实现, 值为value逗号分隔 +- 新增getValue参数, 可以获取不同类型的值 + +#### Bug fixes + +- 修复搜索模式下输入中文不显示的问题 +- 修改render不能及时渲染, 需要二次渲染的问题 +- 修改IE下输入循环触发input事件的问题, IE 慎入 + ### 1.0.3 @@ -41,4 +58,4 @@ #### Bug fixes - 调整布局为flex布局 -- 展开下拉选时, 自动聚焦搜索框 \ No newline at end of file +- 展开下拉选时, 自动聚焦搜索框 diff --git a/dist/static/2.js b/dist/static/2.js index 3f4fb67..9cf20fa 100644 --- a/dist/static/2.js +++ b/dist/static/2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{361:function(e,t,n){e.exports=n.p+"static/wx.f391ad4.jpg"},363:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this.$createElement,t=this._self._c||e;return t("section",{staticClass:"content element-doc"},[this._m(0),this._m(1),t("demo-block",[t("div",[t("p",[this._v("事实证明分页是好使的 ^_^")])]),t("template",{slot:"source"},[t("element-demo0")],1),t("template",{slot:"highlight"},[t("pre",{pre:!0},[t("code",{pre:!0,attrs:{class:"html"}},[this._v('
\n\n\n\n
\n\n
+```
+:::
+
+
+### 自定义选超的提示
+
+:::demo 
+```html
+

+
+
+```
+:::
+
+
+### 自定义选超的闪烁颜色
+
+:::demo 
+```html
+

+
+
+```
+:::
diff --git a/docs/mds/XM19.md b/docs/mds/XM19.md
new file mode 100644
index 0000000..460afcc
--- /dev/null
+++ b/docs/mds/XM19.md
@@ -0,0 +1,111 @@
+## 工具条
+
+
+### 默认工具条
+
+:::demo 
+```html
+

+
+
+```
+:::
+
+
+### 隐藏图标
+
+:::demo 
+```html
+

+
+
+```
+:::
+
+
+### 自定义工具条
+
+:::demo 
+```html
+

+
+
+```
+:::
diff --git a/docs/mds/ZM01.md b/docs/mds/ZM01.md
new file mode 100644
index 0000000..8d5f485
--- /dev/null
+++ b/docs/mds/ZM01.md
@@ -0,0 +1,99 @@
+## 赋值与取值
+
+
+### 给多选赋值
+
+函数`setValue(array)`, 动态赋值多选选中的数据, array可以是value数组, 也可以是完整的object数组
+
+:::demo 
+```html
+

+
+
+
+

+
+
+```
+:::
+
+
+### 取值
+
+函数`getValue(type)`, type类型 name, nameStr, value, valueStr
+
+:::demo 
+```html
+

+
+
+


+
+
+
+
+
+
+

+
+
+
+```
+:::
diff --git a/docs/mds/ZM02.md b/docs/mds/ZM02.md
new file mode 100644
index 0000000..b7fe88d
--- /dev/null
+++ b/docs/mds/ZM02.md
@@ -0,0 +1,50 @@
+## 表单提交
+
+
+### 默认表单提交
+
+:::demo 
+```html
+

+    

+    
+

+
+
+```
+:::
+
+
+### 修改name
+
+:::demo 
+```html
+

+    

+    
+

+
+
+```
+:::
\ No newline at end of file
diff --git a/docs/mds/install.md b/docs/mds/install.md
index 794fe34..ab7216e 100644
--- a/docs/mds/install.md
+++ b/docs/mds/install.md
@@ -28,7 +28,7 @@
 [![star](https://gitee.com/maplemei/xm-select/badge/star.svg?theme=dark)](https://gitee.com/maplemei/xm-select/stargazers)
 [![fork](https://gitee.com/maplemei/xm-select/badge/fork.svg?theme=dark)](https://gitee.com/maplemei/xm-select/members)
 
-[https://gitee.com/maplemei/xm-select](https://gitee.com/maplemei/xm-select)
+[码云下载](https://gitee.com/maplemei/xm-select/releases)
 
 
 
diff --git a/docs/mds/options.md b/docs/mds/options.md
index 7ad6b2e..957f291 100644
--- a/docs/mds/options.md
+++ b/docs/mds/options.md
@@ -32,6 +32,10 @@
 | hide              | 隐藏下拉的回调 | function           |   -  |    -    |
 | template          | 自定义渲染选项 | function({ item, sels, name, value })  |   -  |    -    |
 | on                | 监听选中变化 | function({ arr, item, selected })  |   -  |    -    |
+| max               | 设置多选选中上限 | int  |   -  |    0    |
+| maxMethod         | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值  |   -  |    -    |
+| name              | 表单提交时的name  |  string  |   -  |    select    |
+| toolbar           | 工具条, 具体看下表  |  object  |   -  |    -    |
 
 
 ### prop
@@ -46,9 +50,10 @@
 
 ### theme
 
-| 参数              | 说明                             | 类型            | 可选值 | 默认值 |
-| ----------------- | ------------------------------  | --------------- | ------ | ------ |
-| color        | 颜色      | string     |    -    |    #009688      |
+| 参数          | 说明      | 类型            | 可选值 | 默认值 |
+| ------------ | --------- | --------------- | ------ | ------ |
+| color        | 主题颜色   | string     |    -    |    #009688  |
+| maxColor     | 选中上限闪烁边框颜色      | string     |    -    |    #e54d42  |
 
 
 ### model
@@ -90,6 +95,37 @@ model: {
 ```
 
 
+### toolbar
+
+| 参数          | 说明      | 类型            | 可选值 | 默认值 |
+| ------------ | --------- | --------------- | ------ | ------ |
+| show         | 是否展示工具条   | boolean     |    true / false    |    false  |
+| showIcon     | 是否显示工具图标 | boolean     |    true / false    |    true   |
+| list         | 工具条数组 (默认有 全选/清空, 可以自定义)     | array       |    -    |   [ "ALL", "CLEAR" ] |
+
+- 自定义方式
+
+```
+
+list: [ "ALL", "CLEAR", 
+    {
+        //显示图标, 可以是layui内置的图标, 也可以是自己引入的图标
+        //传入的icon会转化为 
+        icon: 'layui-icon layui-icon-face-smile',
+        //显示名称 
+        name: 'xxx',
+        //点击时触发的回调
+        method: function(data){
+            //data 当前页面的数据
+            
+        }
+    } 
+]
+
+
+```
+
+
 ### 方法
 
 :::warning
@@ -98,10 +134,10 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
 
 | 事件名 | 说明               | 参数 |
 | ------ | ------------------ | -------- |
-| getValue  | 获取当前选中的数据 | - |
-| setValue  | 动态设置数据 | array: 选中的数据, show: 是否展开下拉 |
+| getValue  | 获取当前选中的数据 | (type: 类型), 可选值: name, nameStr, value, valueStr |
+| setValue  | 动态设置数据 | (array: 选中的数据, show: 是否展开下拉) |
 | opened  | 主动展开下拉 | - |
 | closed  | 主动关闭下拉 | - |
-| render  | 重新渲染多选 | (options):见配置项 |
+| render  | 重新渲染多选 | (options: 见配置项) |
 | reset  | 重置为上一次的render状态 | - |
 | update  | 更新多选选中, reset不保留 | - |
diff --git a/docs/mds/question.md b/docs/mds/question.md
index 52d607d..a2ca485 100644
--- a/docs/mds/question.md
+++ b/docs/mds/question.md
@@ -1,10 +1,16 @@
 ## 常见问题
 
 
+### formSelects 与 xm-select
+
+[formSelects](https://github.com/hnzzmsf/layui-formSelects/)是作者很久以前开发的一款多选插件, 在jQuery时代还是相对比较稳定, 不过性能上有很大的问题。痛并思痛后，开始学习其他开源组件的编写方案，最后决定重新开发。
+
+[xm-select](https://gitee.com/maplemei/xm-select)作者精心二次开发的组件, 在formSelects的样式基础上进行了性能优化。目前看来还是比较稳定的 ^_^
+
 
 ### 1.在哪里下载
 
-[Gitee码云下载](https://gitee.com/maplemei/xm-select), 使用时引入`xm-select.js`即可, 具体请看[入门指南](/#/component/install)
+[Gitee码云下载](https://gitee.com/maplemei/xm-select/releases), 使用时引入`xm-select.js`即可, 已经内置了css, 具体请看[入门指南](/#/component/install)
 
 
 ### 2.为什么多选不显示
@@ -14,4 +20,5 @@
 
 ### 3.渲染后还是不显示
 
-打开控制台查看是否报错, 加群: 660408068, 询问
+- 打开控制台查看是否报错
+- 加群: 660408068, 询问
diff --git a/docs/router.js b/docs/router.js
index c098e09..f31abc5 100644
--- a/docs/router.js
+++ b/docs/router.js
@@ -63,6 +63,17 @@ export default [{
             { path: '/example/XM15', name: '构建选项', component: importMd('/XM15') },
             { path: '/example/XM16', name: '监听选择', component: importMd('/XM16') },
             { path: '/example/XM17', name: '性能测试', component: importMd('/XM17') },
+            { path: '/example/XM18', name: '多选上限', component: importMd('/XM18') },
+            { path: '/example/XM19', name: '工具条', component: importMd('/XM19') },
+        ]
+	}, {
+		path: '/example-custom',
+		name: '进阶示例',
+		redirect: '/example-custom/ZM01',
+		component: Component,
+		children: [
+            { path: '/example-custom/ZM01', name: '赋值与取值', component: importMd('/ZM01') },
+            { path: '/example-custom/ZM02', name: '表单提交', component: importMd('/ZM02') },
         ]
 	}, {
 		path: '/question',
diff --git a/package.json b/package.json
index 582e616..ac8c3c6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "xm-select",
-	"version": "1.0.0",
-	"description": "",
+	"version": "1.0.4",
+	"description": "始于Layui的select多选解决方案",
 	"main": "index.js",
 	"scripts": {
 		"dev": "cross-env NODE_ENV=dev node_modules/.bin/webpack-dev-server --config build/webpack.config.js",
diff --git a/src/components/common/util.js b/src/components/common/util.js
index 3a03e48..3917217 100644
--- a/src/components/common/util.js
+++ b/src/components/common/util.js
@@ -1,67 +1,147 @@
-/**
- * 选中dom元素
- */
+/**
+ * 选中dom元素
+ */
 export function selector(el) {
-	return document.querySelector(el);
-}
-
-/**
- * 警告提示
- */
-export function warn() {
-	let arr = [];
-	for (var i = 0; i < arguments.length; i++) {
-		arr.push(`${i + 1}. ${arguments[i]}`);
-	}
-	console.warn(arr.join('\n'));
-}
-
-/**
- * 全局监听点击事件
- */
-export function listenerClose(data, handler){
-	window.addEventListener('click', (e) => handler(e));
-}
-
-/**
- * 安全拷贝数据
- */
-export function safety(data){
-	return JSON.parse(JSON.stringify(data));
-}
-
-/**
- * 检测对象是否为数组
- */
-export function isArray(obj){
-	return Object.prototype.toString.call(obj) == "[object Array]";
+    return document.querySelector(el);
 }
 
+/**
+ * 警告提示
+ */
+export function warn() {
+    let arr = [];
+    for (var i = 0; i < arguments.length; i++) {
+        arr.push(`${i + 1}. ${arguments[i]}`);
+    }
+    console.warn(arr.join('\n'));
+}
+
+/**
+ * 全局监听点击事件
+ */
+export function listenerClose(data, handler) {
+    window.addEventListener('click', (e) => handler(e));
+}
+
+/**
+ * 安全拷贝数据
+ */
+export function safety(data) {
+    return JSON.parse(JSON.stringify(data));
+}
+
+/**
+ * 检测对象是否为数组
+ */
+export function isArray(obj) {
+    return Object.prototype.toString.call(obj) == "[object Array]";
+}
+
+/**
+ * 检测对象是否为函数
+ */
+export function isFunction(obj) {
+    return Object.prototype.toString.call(obj) == "[object Function]";
+}
+
+/**
+ * 转化为数字
+ */
+export function toNum(obj) {
+    obj -= 0;
+    isNaN(obj) && (obj = 0);
+    return obj;
+}
+
+/**
+ * 简单的深度合并
+ */
+export function deepMerge(obj1, obj2) {
+    let key;
+    for (key in obj2) {
+        // 如果target(也就是obj1[key])存在，且是对象的话再去调用deepMerge，否则就是obj1[key]里面没这个对象，需要与obj2[key]合并
+        // 如果obj2[key]没有值或者值不是对象，此时直接替换obj1[key]
+        obj1[key] =
+            obj1[key] &&
+            obj1[key].toString() === "[object Object]" &&
+            (obj2[key] && obj2[key].toString() === "[object Object]") ?
+            deepMerge(obj1[key], obj2[key]) :
+            (obj1[key] = obj2[key]);
+    }
+    return obj1;
+}
+
+/**
+ * 数组合并
+ */
+export function mergeArr(arr1, arr2, prop) {
+    let value = prop.value;
+    let result = [...arr2];
+    for (let i in arr1) {
+        let item = arr1[i];
+        if (!arr2.find(a => a[value] == item[value])) {
+            result.push(item);
+        }
+    }
+    return result;
+}
+
+
+
 export function watch(data) {
-	return new Promise((resolve, reject) => {
-		for (let key in data) {
-			let value = data[key];
-			Object.defineProperty(data, key, {
-				configurable: false, // 该状态下的属性描述符不能被修改和删除
-				enumerable: false, // 该状态下的属性描述符中的属性不可被枚举
-				get() {
-					return value;
-				},
-				set(newVal) {
-					if (newVal !== value) {
-						resolve(key, newVal, value);
-						value = newVal;
-					}
-				}
-			});
-		}
-	});
+    return new Promise((resolve, reject) => {
+        for (let key in data) {
+            let value = data[key];
+            Object.defineProperty(data, key, {
+                configurable: false, // 该状态下的属性描述符不能被修改和删除
+                enumerable: false, // 该状态下的属性描述符中的属性不可被枚举
+                get() {
+                    return value;
+                },
+                set(newVal) {
+                    if (newVal !== value) {
+                        resolve(key, newVal, value);
+                        value = newVal;
+                    }
+                }
+            });
+        }
+    });
+}
+
+export function checkUserAgent() {
+    const ua = navigator.userAgent;
+    if (ua.indexOf('Mac OS') != -1) {
+        return 'mac';
+    }
+    return 'win';
+}
+
+export function IEVersion() {
+    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
+    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
+    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
+    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
+    if (isIE) {
+        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
+        reIE.test(userAgent);
+        var fIEVersion = parseFloat(RegExp["$1"]);
+        if (fIEVersion == 7) {
+            return 7;
+        } else if (fIEVersion == 8) {
+            return 8;
+        } else if (fIEVersion == 9) {
+            return 9;
+        } else if (fIEVersion == 10) {
+            return 10;
+        } else {
+            return 6; //IE版本<=7
+        }
+    } else if (isEdge) {
+        return 'edge'; //edge
+    } else if (isIE11) {
+        return 11; //IE11  
+    } else {
+        return -1; //不是ie浏览器
+    }
 }
-
-export function checkUserAgent(){
-	const ua = navigator.userAgent;
-	if(ua.indexOf('Mac OS') != -1){
-		return 'mac';
-	}
-	return 'win';
-}
\ No newline at end of file
diff --git a/src/components/config/options.js b/src/components/config/options.js
index 975eee6..00f9c54 100644
--- a/src/components/config/options.js
+++ b/src/components/config/options.js
@@ -5,10 +5,12 @@ const lanSetting = { zn, en }
 
 export default function (lan = 'zn') {
 	let setting = lanSetting[lan] || zn;
-	
+
 	return {
 		//多选数据
 		data: [],
+        //表单提交的name
+        name: 'select',
 		//默认选中数据, 优先级大于selected
 		initValue: null,
 		//默认提示
@@ -48,6 +50,15 @@ export default function (lan = 'zn') {
 		repeat: false,
 		//是否点击选项后自动关闭下拉框
 		clickClose: false,
+        //多选上限
+        max: 0,
+        maxMethod: function(sels, item){},
+        //工具条
+        toolbar: {
+            show: false,
+            showIcon: true,
+            list: [ 'ALL', 'CLEAR' ],
+        },
 		//自定义属性名称
 		prop: {
 			name: 'name',
@@ -57,7 +68,8 @@ export default function (lan = 'zn') {
 		},
 		//主题配置
 		theme: {
-			color: '#009688',
+			color: '#009688',       //默认主题颜色
+            maxColor: '#e54d42',    //多选上限边框闪烁颜色
 		},
 		//模型
 		model: {
@@ -79,22 +91,22 @@ export default function (lan = 'zn') {
 				},
 			},
 		},
-		
+
 		// 展开下拉框
 		show(){
-			
+
 		},
 		// 隐藏下拉框
 		hide(){
-			
+
 		},
-		// 模板组成, 当前option数据, 已经选中的数据, name, value  
+		// 模板组成, 当前option数据, 已经选中的数据, name, value
 		template({ item, sels, name, value }){
 			return name;
 		},
 		//监听选中事件
 		on({ arr, item, selected }){
-			
+
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/components/core/index.js b/src/components/core/index.js
index ccd2e91..d9a3bb6 100644
--- a/src/components/core/index.js
+++ b/src/components/core/index.js
@@ -1,6 +1,6 @@
 import { h, Component, render } from '@/components/preact'
 import Framework from '@/components/element/framework'
-import { selector, warn, listenerClose, watch, safety, isArray } from '@/components/common/util'
+import { selector, warn, listenerClose, watch, safety, isArray, deepMerge } from '@/components/common/util'
 import defaultOptions from '@/components/config/options'
 
 
@@ -30,15 +30,15 @@ class xmOptions {
 		//定义默认值
 		this.options = defaultOptions(options.language);
 		//开始渲染数据
-		this.update(options, true);
+		this.update(options);
 	}
 
 	/**
 	 * 更新数据 + 重新渲染
 	 */
-	update(options = {}, isNew){
+	update(options = {}){
 		//记录最新的配置项
-		this.options = {...this.options, ...options};
+		this.options = deepMerge(this.options, options);
 
 		//如果dom不存在, 则不进行渲染事项
 		let dom = selector(this.options.el);
@@ -46,16 +46,10 @@ class xmOptions {
 			warn(`没有找到渲染对象: ${options.el}, 请检查`)
 			return ;
 		}
-		//如果是历史渲染过的数据, 重置一下数据
-		isNew && childs[this.options.el] && childs[this.options.el].reset();
 
-		let isRender = false;
 		const onRef = (ref) => childs[this.options.el] = ref;
-		const onReset = result => {
-			this.options.data = result;
-		}
 
-		render(, dom);
+		render(, dom);
 
 		//记录数据
 		data[this.options.el] = this;
@@ -98,8 +92,23 @@ class xmOptions {
 	/**
 	 * 获取多选选中的数据
 	 */
-	getValue(){
-		return safety(childs[this.options.el].state.sels);
+	getValue(type){
+		let arr = safety(childs[this.options.el].state.sels);
+        
+        if(type === 'name'){
+            return arr.map(item => item[this.options.prop.name]);
+        }else
+        if(type === 'nameStr'){
+            return arr.map(item => item[this.options.prop.name]).join(',');
+        }else
+        if(type === 'value'){
+            return arr.map(item => item[this.options.prop.value]);
+        }else
+        if(type === 'valueStr'){
+            return arr.map(item => item[this.options.prop.value]).join(',');
+        }
+        
+        return arr;
 	}
 
 	/**
diff --git a/src/components/element/framework.js b/src/components/element/framework.js
index b57fdf2..22de6b1 100644
--- a/src/components/element/framework.js
+++ b/src/components/element/framework.js
@@ -1,5 +1,5 @@
 import { h, Component, render } from '@/components/preact'
-import { checkUserAgent } from '@/components/common/util'
+import { checkUserAgent, isFunction, toNum } from '@/components/common/util'
 
 //渲染类
 import Tips from './tips';
@@ -10,31 +10,33 @@ import General from './model/general';
  * 框架渲染类, 渲染基础的外边框 + 属性变化监听
  */
 class Framework extends Component{
-	
+
 	constructor(options){
 		super(options);
 		//初始化多选数据
-		this.reset();
+		this.reset(this.props);
 		//回传子组件
 		this.props.onRef(this);
 		this.bodyView = null;
 	}
-	
-	reset(){
-		let selected = this.props.prop.selected;
-		this.value(this.props.initValue ? this.props.initValue : this.props.data.filter(item => item[selected]), false);
-		this.resetDate(this.props.data);
+
+	reset(props){
+        //用于多选上限的边框颜色变化
+        this.updateBorderColor('');
+		this.resetDate(props.data);
+		let selected = props.prop.selected;
+		this.value(props.initValue ? props.initValue : this.state.data.filter(item => item[selected]), false);
 	}
-	
+
 	resetDate(data = []){
 		this.setState({ data });
 	}
-	
+
 	value(sels, show){
-		let data = this.props.data;
+		let data = this.state.data;
 		let value = this.props.prop.value;
 		let direction = this.props.direction;
-		this.setState({ 
+		this.setState({
 			sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => data.find(item => item[value] == val)).filter(a => a),
 			//下拉框是否展开
 			show,
@@ -43,36 +45,47 @@ class Framework extends Component{
 			directionVal: '',
 		})
 	}
-	
-	onReset(data){
-		this.resetDate(data);
+
+    updateBorderColor(tmpColor){
+        this.setState({ tmpColor });
+    }
+
+	onReset(data, type){
+        //重置数据
+        if(type === 'data'){
+            this.resetDate(data);
+        }else
+        //重置选中数据
+        if(type === 'sels'){
+            this.setState({ sels: data });
+        }
 	}
-	
+
 	onClick(e){
 		let show = !this.state.show;
-		
+
 		if(show){
 			if(this.props.show && this.props.show() == false){
 				return;
 			}
 			//事件互斥原则, 打开一个多选, 关闭其他所有多选
 			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();
@@ -87,20 +100,20 @@ class Framework extends Component{
 			//如果产生滚动条, 关闭下拉后回到顶部
 			this.bodyView.scroll && this.bodyView.scroll(0, 0);
 		}
-		
+
 		this.setState({ show });
-		
+
 		//阻止其他绑定事件的冒泡
 		e && e.stopPropagation();
 	}
-	
+
 	componentWillReceiveProps(props){
-		this.resetDate(props.data);
+        this.reset(props)
 	}
-	
+
 	render(config, { sels, show }) {
-		const { tips, theme, prop, style, radio, repeat, clickClose, on } = config;
-		const borderStyle = { borderColor: theme.color };
+		const { tips, theme, prop, style, radio, repeat, clickClose, on, max, maxMethod } = config;
+		const borderStyle = { borderColor: this.state.tmpColor || theme.color };
 		//最外层边框的属性
 		const xmSelectProps = {
 			style: {
@@ -120,18 +133,29 @@ class Framework extends Component{
 		}
 		//普通多选数据
 		const valueProp = prop.value;
-		
+
 		//选项, 选中状态, 禁用状态, 是否强制删除:在label上点击删除
 		const ck = (item, selected, disabled, mandatoryDelete) => {
 			//如果是禁用状态, 不能进行操作
 			if(disabled) return;
-			
+
+            //查看是否设置了多选上限
+            let maxCount = toNum(max);
+            if(maxCount > 0 && sels.length >= maxCount){
+                this.updateBorderColor(theme.maxColor);
+                //恢复正常
+                setTimeout(() => this.updateBorderColor(''), 300);
+                //查看是否需要回调
+                maxMethod && isFunction(maxMethod) && maxMethod(sels, item);
+                return ;
+            }
+
 			//如果现在是选中状态
 			if(selected && (!repeat || mandatoryDelete)){
 				let index = sels.findIndex(sel => sel[valueProp] == item[valueProp])
 				if(index != -1){
 					sels.splice(index, 1);
-					this.setState(sels);
+					this.setState({ sels });
 				}
 			}else{
 				//如果是单选模式
@@ -141,20 +165,25 @@ class Framework extends Component{
 					this.setState({ sels: [...sels, item] });
 				}
 			}
-			
+
 			on && on({ arr: this.state.sels, item, selected: !selected });
 
 			//检查是否为选择即关闭状态, 强制删除情况下不做处理
 			clickClose && !mandatoryDelete && this.onClick();
 		};
-		
+
+        const select = (
+             item[prop.value]).join(',') }>
+        )
+
 		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(' ');
-		
+
 		return (
 			
+                { select }