v1.0.11

#### 新增

- 新增`disabled`配置, 可以禁用多选
- 新增`create`配置, 可以创建条目, 具体见 [创建条目](https://maplemei.gitee.io/xm-select/#/example/XM27)
- 方法`warning`新增参数`sustain`, 可以配置是否持续显示
- 新增全局`get`方法, 可以获取多选渲染后的对象
- 新增全局`batch`方法, 可以批量给渲染后的多选执行方法

#### Bug fixes

- 修复`update`方法, 会使已选中数据丢失的问题
- 修复`Safari`浏览器下, 搜索框无法聚焦的问题

src/components/config/options.js

@@ -15,8 +15,12 @@ export default function (lan = 'zn') {
         name: 'select',
         //尺寸
         size: 'medium',
+        //是否禁用多选
+        disabled: false,
 		//默认选中数据, 优先级大于selected
 		initValue: null,
+        //创建条目
+        create: null,
 		//默认提示
 		tips: setting.tips,
 		//空数据提示

src/components/core/index.js

@@ -162,10 +162,17 @@ class xmOptions {
     /**
      * 闪烁警告边框
      */
-    warning(color){
-        childs[this.options.el].updateBorderColor(color || this.options.theme.maxColor);
+    warning(color, sustain = false){
+        let showColor = color || this.options.theme.maxColor;
+
+        sustain === true ? (
+            childs[this.options.el].base.style.borderColor = showColor
+        ) : (
+            childs[this.options.el].updateBorderColor(showColor)
+        )
         return this;
-    }
+    }
+
 
 }
 

src/components/element/framework.js

@@ -24,8 +24,9 @@ class Framework extends Component{
 	reset(props){
         //用于多选上限的边框颜色变化
         this.updateBorderColor('');
+        let old = this.state.data;
 		this.resetDate(props.data);
-		this.value(props.initValue ? props.initValue : this.findValue(this.state.data), !!this.state.show);
+		JSON.stringify(props.data) !== JSON.stringify(old) && this.value(props.initValue ? props.initValue : this.findValue(this.state.data), !!this.state.show);
 	}
 
     findValue(data){
@@ -115,6 +116,11 @@ class Framework extends Component{
 	}
 
 	onClick(e){
+        if(this.props.disabled){
+            this.state.show !== false && this.setState({ show: false });
+            return ;
+        }
+
 		let show = !this.state.show;
 
 		if(show){
@@ -197,6 +203,9 @@ class Framework extends Component{
                 this.updateBorderColor('')
             }, 300);
         }
+        if(config.disabled){
+            show = false;
+        }
 
 		//右边下拉箭头的变化class
 		const iconClass = show ? 'xm-icon xm-icon-expand' : 'xm-icon';
@@ -265,6 +274,7 @@ class Framework extends Component{
                         <General { ...bodyProps } />
                     ) }
 				</div>
+                { config.disabled && <div class="xm-select-disabled"></div> }
 			</xm-select>
 		);
 	}

src/components/element/model/custom.js

@@ -14,11 +14,11 @@ class Custom extends Component{
     }
 
     shouldComponentUpdate(){
-        return !this.already;
+        return !this.prepare;
     }
 
 	render(config) {
-        this.already = true;
+        this.prepare = true;
 		return (
 			<div onClick={ this.blockClick } class="xm-body-custom" dangerouslySetInnerHTML={{ __html: config.content }}>
 

src/components/element/model/general.js

@@ -137,11 +137,11 @@ class General extends Component{
 
 	render(config) {
 
-		let { data, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips } = config
+		let { data, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips, create } = config
 
 		const { name, value, disabled, children, optgroup } = prop;
 
-		let arr = deepMerge([], data);
+		let arr = deepMerge([], data), creator;
 		//是否开启了搜索
 		if(filterable){
 			if(remoteSearch){//是否进行远程搜索
@@ -181,6 +181,8 @@ class General extends Component{
                     arr[arr.length - 1].__del = true;
                 }
                 arr = arr.filter(item => !item.__del);
+                //创建条目
+                creator = this.state.filterValue && isFunction(create) && create(this.state.filterValue);
 			}
 		}
 
@@ -352,9 +354,9 @@ class General extends Component{
 		arr = arr.map(renderGroup);
 
 		if(!arr.length){
-			arr.push(
-				<div class="xm-select-empty">{ empty }</div>
-			)
+			arr.push( creator ? renderItem(creator) : (
+                <div class="xm-select-empty">{ empty }</div>
+            ))
 		}
 
 		return (

src/index.js

@@ -2,15 +2,47 @@ import { name, version } from '../package.json'
 import '@/components/common/expand'
 import Core from '@/components/core'
 import '@/style/index.less'
-import '@/style/iconfont.less'
-
+import '@/style/iconfont.less'
+import { selector, warn } from '@/components/common/util'
 
+const object = {}
 const xmSelect = {
 	name,
 	version,
 	render(options) {
-		return new Core(options);
-	}
+		let instance = new Core(options);
+        if(instance){
+            let { el } = options;
+            let select = object[el];
+            select !== undefined && (delete object[el]);
+            object[el] = instance;
+        }
+        return instance;
+	},
+    get(filter){
+        let type = Object.prototype.toString.call(filter);
+        let method;
+        switch (type){
+            case '[object String]':
+                filter && (method = item => item === filter);
+                break;
+            case '[object RegExp]':
+                method = item => filter.test(item);
+                break;
+            case '[object Function]':
+                method = filter;
+                break;
+            default:
+                break;
+        }
+        let keys = Object.keys(object)
+        return (method ? keys.filter(method) : keys).map(key => object[key]).filter(instance => selector(instance.options.el));
+    },
+    batch(filter, method){
+        let args = [ ...arguments ];
+        args.splice(0, 2);
+        return this.get(filter).map(instance => instance[method](...args));
+    }
 }
 
 

src/style/index.less

@@ -33,6 +33,13 @@
     }
 }
 
+.userselect(@v){
+    user-select: @v;
+    -ms-user-select: @v;
+    -moz-user-select: @v;
+    -webkit-user-select: @v;
+}
+
 xm-select{
 	*{
 		margin: 0;
@@ -42,10 +49,7 @@ xm-select{
 		font-weight: 400;
 		// color: @fontColor;
 		text-overflow: ellipsis;
-		user-select: none;
-		-ms-user-select: none;
-		-moz-user-select: none;
-		-webkit-user-select: none;
+		.userselect(none);
 	}
 
 	background-color: #FFF;
@@ -363,6 +367,7 @@ xm-select{
 		line-height: 1.3;
 		padding-left: 10px;
 		outline: 0;
+        .userselect(text);
 	}
 
 	.dis{
@@ -401,6 +406,18 @@ xm-select{
         display: none !important;
     }
 
+    .xm-select-disabled{
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        cursor: no-drop;
+        z-index: 2;
+        opacity: 0.3;
+        background-color: #FFF;
+    }
+
 }
 
 //不同尺寸下的数据调整