2022-07-28 xm-select 的使用
时间：2022-09-04 08:00:00
简介(文档)
始于layui多选解决方案。
前身formSelects, 由于渲染速度慢， 代码冗余, 被放弃了
xm-select采用新的开发方法， 利用preact进行渲染, 渲染速度大大提高， 而且可以灵活拓展
第一步: 下载 第二步: 引入 xm-select.js 第三步: 写一个`` 第四步: 渲染 var demo1 = xmSelect.render({ el: '#demo1', data: [ {name: '张三', value: 1}, {name: '李四', value: 2}, {name: '王五', value: 3}, ] })搭配layui使用
必须搭配div使用:
layui.use([.. 'selectX'], function () { ... var selectX = layui.selectX; var baseDict = { radio: true,//是否打开单选模式 filterable: true,是否打开搜索 layVerify: 'required',//表单验证, 同layui的lay-verify icon: 'hidden',//隐藏图标 disabled: true多选是否多选？ } var demo= selectX.render({ name: 'demoSelect', tips: '标题', url: Feng.ctxPath '/xxx/xxx', label: {type:'text'},// ...baseDict, initValue: [result.data.xxx]//回显,以下需要搭配selectX.js }); });selectX.js,重新定制可回显的下拉菜单
layui.define(['jquery', 'xmSelect'], function (exports) { "use strict"; var selectX = function () { this.v = '1.0'; }, $ = layui.$, xmSelect = layui.xmSelect; selectX.prototype.render = function (options) { var opts = options, elem = opts.elem; var xm = xmSelect.render({ autoRow: true, el: opts.name !== undefined ?== undefined ? "#" opts.name : elem, name: opts.name, tips: opts.tips || "请选择", filterable: opts.filterable!==undefined?opts.filterable : false, radio: opts.radio !== undefined ? opts.radio : true, // 默认单选 toolbar: {show: opts.toolbar !== undefined ? opts.toolbar : opts.radio !== undefined ? !opts.radio : true}, // 默认单选不开工具栏，多选开工具栏 clickClose: opts.clickClose !== undefined ? opts.clickClose : opts.radio !== undefined ? opts.radio : false,// 点击后关闭默认单选 layVerify: opts.layVerify !== undefined ? opts.layVerify : 'required', // 默认必填 model: { icon: opts.icon || '', label: opts.label || { type: 'block' } }, style: opts.style || {}, on:opts.on || function (data){ if (opts.isChecked && data.arr.length===0){ return data.change; } return data.arr; }, disabled: opts.disabled!==undefined ? opts.disabled : false, prop:{ name: 'name', value: 'code', ...opts.prop }, data:[] }) if (options.url!==undefined){ this.setData(xm,options) } return xm; }; ///更新数据和样式 selectX.prototype.setData =function(xm,options){ let that = this; $.post(options.url,(obj)=>{ let data = obj; if (obj.data!==undefined){ data = obj.data; } that.update(xm,{ data: data, ...options }) }) } //只更新样式 selectX.prototype.update = (xm,options) => { xm.update({ ...options }); } exports('selectX', new selectX()); });xm-select.js源码
!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="./",n(n.s=84)}({16:function(e){e.exports={a:"xm-select",b:"1.0.10"}},2:function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=funtion(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var r=(l=o,a=btoa(unescape(encodeURIComponent(JSON.stringify(l)))),s="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(s," */")),i=o.sources.map(function(e){return"/*# sourceURL=".concat(o.sourceRoot).concat(e," */")});return[n].concat(i).concat([r]).join("\n")}var l,a,s;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2],"{").concat(n,"}"):n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},r=0;r=0&&u.splice(t,1)}function b(e){var t=document.createElement("style");if(void 0===e.attrs.type&&(e.attrs.type="text/css"),void 0===e.attrs.nonce){var o=function(){0;return n.nc}();o&&(e.attrs.nonce=o)}return y(t,e.attrs),h(e,t),t}function y(e,t){Object.keys(t).forEach(function(n){e.setAttribute(n,t[n])})}function x(e,t){var n,o,r,i;if(t.transform&&e.css){if(!(i="function"==typeof t.transform?t.transform(e.css):t.transform.default(e.css)))return function(){};e.css=i}if(t.singleton){var l=c++;n=s||(s=b(t)),o=A.bind(null,n,l,!1),r=A.bind(null,n,l,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(e){var t=document.createElement("link");return void 0===e.attrs.type&&(e.attrs.type="text/css"),e.attrs.rel="stylesheet",y(t,e.attrs),h(e,t),t}(t),o=function(e,t,n){var o=n.css,r=n.sourceMap,i=void 0===t.convertToAbsoluteUrls&&r;(t.convertToAbsoluteUrls||i)&&(o=p(o));r&&(o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var l=new Blob([o],{type:"text/css"}),a=e.href;e.href=URL.createObjectURL(l),a&&URL.revokeObjectURL(a)}.bind(null,n,t),r=function(){m(n),n.href&&URL.revokeObjectURL(n.href)}):(n=b(t),o=function(e,t){var n=t.css,o=t.media;o&&e.setAttribute("media",o);if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}.bind(null,n),r=function(){m(n)});return o(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;o(e=t)}else r()}}e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=l()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var n=d(e,t);return f(n,t),function(e){for(var o=[],r=0;r2;)l.push(c[s]);for(t&&null!=t.children&&(l.length||l.push(t.children),delete t.children);l.length;)if((o=l.pop())&&void 0!==o.pop)for(s=o.length;s--;)l.push(o[s]);else"boolean"==typeof o&&(o=null),(i="function"!=typeof e)&&(null==o?o="":"number"==typeof o?o=String(o):"string"!=typeof o&&(i=!1)),i&&n?u[u.length-1]+=o:u===a?u=[o]:u.push(o),n=i;var p=new r;return p.nodeName=e,p.children=u,p.attributes=null==t?void 0:t,p.key=null==t?void 0:t.key,p}function c(e,t){for(var n in t)e[n]=t[n];return e}function u(e,t){null!=e&&("function"==typeof e?e(t):e.current=t)}var p="function"==typeof Promise?Promise.resolve().then.bind(Promise.resolve()):setTimeout,f=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,d=[];function h(e){!e._dirty&&(e._dirty=!0)&&1==d.push(e)&&p(m)}function m(){for(var e;e=d.pop();)e._dirty&&B(e)}function b(e,t){return e.normalizedNodeName===t||e.nodeName.toLowerCase()===t.toLowerCase()}function y(e){var t=c({},e.attributes);t.children=e.children;var n=e.nodeName.defaultProps;if(void 0!==n)for(var o in n)void 0===t[o]&&(t[o]=n[o]);return t}function x(e){var t=e.parentNode;t&&t.removeChild(e)}function v(e,t,n,r,i){if("className"===t&&(t="class"),"key"===t);else if("ref"===t)u(n,null),u(r,e);else if("class"!==t||i)if("style"===t){if(r&&"string"!=typeof r&&"string"!=typeof n||(e.style.cssText=r||""),r&&"object"==o(r)){if("string"!=typeof n)for(var l in n)l in r||(e.style[l]="");for(var l in r)e.style[l]="number"==typeof r[l]&&!1===f.test(l)?r[l]+"px":r[l]}}else if("dangerouslySetInnerHTML"===t)r&&(e.innerHTML=r.__html||"");else if("o"==t[0]&&"n"==t[1]){var a=t!==(t=t.replace(/Capture$/,""));t=t.toLowerCase().substring(2),r?n||e.addEventListener(t,g,a):e.removeEventListener(t,g,a),(e._listeners||(e._listeners={}))[t]=r}else if("list"!==t&&"type"!==t&&!i&&t in e){try{e[t]=null==r?"":r}catch(e){}null!=r&&!1!==r||"spellcheck"==t||e.removeAttribute(t)}else{var s=i&&t!==(t=t.replace(/^xlink:?/,""));null==r||!1===r?s?e.removeAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase()):e.removeAttribute(t):"function"!=typeof r&&(s?e.setAttributeNS("http://www.w3.org/1999/xlink",t.toLowerCase(),r):e.setAttribute(t,r))}else e.className=r||""}function g(e){return this._listeners[e.type](e)}var A=[],w=0,k=!1,C=!1;function S(){for(var e;e=A.shift();)e.componentDidMount&&e.componentDidMount()}function O(e,t,n,o,r,i){w++||(k=null!=r&&void 0!==r.ownerSVGElement,C=null!=e&&!("__preactattr_"in e));var l=function e(t,n,o,r,i){var l=t,a=k;if(null!=n&&"boolean"!=typeof n||(n=""),"string"==typeof n||"number"==typeof n)return t&&void 0!==t.splitText&&t.parentNode&&(!t._component||i)?t.nodeValue!=n&&(t.nodeValue=n):(l=document.createTextNode(n),t&&(t.parentNode&&t.parentNode.replaceChild(l,t),j(t,!0))),l.__preactattr_=!0,l;var s,c,u=n.nodeName;if("function"==typeof u)return function(e,t,n,o){for(var r=e&&e._component,i=r,l=e,a=r&&e._componentConstructor===t.nodeName,s=a,c=y(t);r&&!s&&(r=r._parentComponent);)s=r.constructor===t.nodeName;return r&&s&&(!o||r._component)?(I(r,c,3,n,o),e=r.base):(i&&!a&&(V(i),e=l=null),r=E(t.nodeName,c,n),e&&!r.nextBase&&(r.nextBase=e,l=null),I(r,c,1,n,o),e=r.base,l&&e!==l&&(l._component=null,j(l,!1))),e}(t,n,o,r);if(k="svg"===u||"foreignObject"!==u&&k,u=String(u),(!t||!b(t,u))&&(s=u,(c=k?document.createElementNS("http://www.w3.org/2000/svg",s):document.createElement(s)).normalizedNodeName=s,l=c,t)){for(;t.firstChild;)l.appendChild(t.firstChild);t.parentNode&&t.parentNode.replaceChild(l,t),j(t,!0)}var p=l.firstChild,f=l.__preactattr_,d=n.children;if(null==f){f=l.__preactattr_={};for(var h=l.attributes,m=h.length;m--;)f[h[m].name]=h[m].value}return!C&&d&&1===d.length&&"string"==typeof d[0]&&null!=p&&void 0!==p.splitText&&null==p.nextSibling?p.nodeValue!=d[0]&&(p.nodeValue=d[0]):(d&&d.length||null!=p)&&function(t,n,o,r,i){var l,a,s,c,u,p,f,d,h=t.childNodes,m=[],y={},v=0,g=0,A=h.length,w=0,k=n?n.length:0;if(0!==A)for(var C=0;C"===t?(a(),o=1):o&&("="===t?(o=4,n=r,r=""):"/"===t?(a(),3===o&&(l=l[0]),o=l,(l=l[0]).push(o,4),o=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(a(),o=2):r+=t)}return a(),l},z="function"==typeof Map,L=z?new Map:{},U=z?function(e){var t=L.get(e);return t||L.set(e,t=M(e)),t}:function(e){for(var t="",n=0;n1?t:t[0]}).bind(s);function D(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);tr?n-r:r,l=this.labelRef.scrollLeft+e.deltaY;l<0&&(l=0),l>i&&(l=i),this.labelRef.scrollLeft=l}}},{key:"componentDidMount",value:function(){this.labelRef.addEventListener&&this.labelRef.addEventListener("DOMMouseScroll",this.scrollFunc.bind(this),!1),this.labelRef.attachEvent&&this.labelRef.attachEvent("onmousewheel",this.scrollFunc.bind(this)),this.labelRef.onmousewheel=this.scrollFunc.bind(this)}},{key:"render",value:function(e){var t=this,n=e.data,o=e.prop,r=e.theme,i=e.model,l=e.sels,a=e.autoRow,c=o.name,u=o.disabled,p=i.label,f=p.type,d=p[f],h="",m=!0;if("text"===f)h=l.map(function(e){return"".concat(d.left).concat(e[c]).concat(d.right)}).join(d.separator);else if("block"===f){m=!1;var b=$(l),y={backgroundColor:r.color},x=d.showCount<=0?b.length:d.showCount;h=b.splice(0,x).map(function(e){var n={width:d.showIcon?"calc(100% - 20px)":"100%"};return s("div",{class:["xm-label-block",e[u]?"disabled":""].join(" "),style:y},s("span",{style:n},e[c]),d.showIcon&&s("i",{class:"xm-iconfont xm-icon-close",onClick:t.iconClick.bind(t,e,!0,e[u])}))}),b.length&&h.push(s("div",{class:"xm-label-block",style:y},"+ ",b.length))}else h=l.length&&d&&d.template?d.template(n,l):l.map(function(e){return e[c]}).join(",");return s("div",{class:["xm-label",a?"auto-row":"single-row"].join(" ")},s("div",{class:"scroll",ref:function(e){return t.labelRef=e}},m?s("div",{class:"label-content",dangerouslySetInnerHTML:{__html:h}}):s("div",{class:"label-content"},h)))}}])&&ee(n.prototype,o),r&&ee(n,r),t}();function ie(e){return(ie="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function le(e,t){for(var n=0;n=t||this.changePageIndex(n+1)}},{key:"changePageIndex",value:function(e){this.setState({pageIndex:e})}},{key:"searchInput",value:function(e){var t=this,n=e.target.value;n!==this.__value&&(clearTimeout(this.searchCid),this.inputOver&&(this.__value=n,this.searchCid=setTimeout(function(){t.callback=!0,t.setState({filterValue:t.__value,remote:!0})},this.props.delay)))}},{key:"focus",value:function(){this.searchInputRef&&this.searchInputRef.focus()}},{key:"blur",value:function(){this.searchInputRef&&this.searchInputRef.blur()}},{key:"handleComposition",value:function(e){var t=e.type;"compositionstart"===t?(this.inputOver=!1,clearTimeout(this.searchCid)):"compositionend"===t&&(this.inputOver=!0,this.searchInput(e))}},{key:"componentWillReceiveProps",value:function(e){var t=this;this.props.show!=e.show&&(e.show?setTimeout(function(){return t.focus()},0):(this.setState({filterValue:""}),this.__value="",this.searchInputRef&&(this.searchInputRef.value="")))}},{key:"componentDidUpdate",value:function(){if(this.callback){this.callback=!1;var e=this.props.filterDone;q(e)&&e(this.state.filterValue,this.tempData||[])}}},{key:"render",value:function(e){var t=this,n=e.data,o=e.prop,r=e.template,i=e.theme,l=e.radio,a=e.sels,c=e.empty,u=e.filterable,p=e.filterMethod,f=e.remoteSearch,d=e.remoteMethod,h=(e.delay,e.searchTips),m=o.name,b=o.value,y=o.disabled,x=o.children,v=o.optgroup,g=J([],n);if(u)if(f)this.state.remote&&(this.callback=!1,this.setState({loading:!0,remote:!1}),this.blur(),d(this.state.filterValue,function(e){t.focus(),t.callback=!0,t.setState({loading:!1}),t.props.onReset(e,"data")},this.props.show));else{g=g.filter(function(e,n){return e[v]?(delete e.__del,!0):p(t.state.filterValue,e,n,o)});for(var A=0;Aj&&this.changePageIndex(j),j>0&&this.state.pageIndex<=0&&this.changePageIndex(1);var _=(this.state.pageIndex-1)*e.pageSize,R=_+e.pageSize;g=g.slice(_,R);var E={cursor:"no-drop",color:"#d2d2d2"},P={},I={};this.state.pageIndex<=1&&(P=E),this.state.pageIndex==j&&(I=E),O=s("div",{class:"xm-paging"},s("span",{style:P,onClick:this.pagePrevClick.bind(this)},"上一页"),s("span",null,this.state.pageIndex," / ",j),s("span",{style:I,onClick:function(e){return t.pageNextClick.bind(t,e,j)()}},"下一页"))}else e.showCount>0&&(g=g.slice(0,e.showCount));var B,V=[];g.forEach(function(e){var t=S[e[b]];t!=B&&(B=t,V.push(B)),V.push(e)});var T=J([],g=V);this.tempData=T;var M=s("div",{class:"xm-toolbar"},e.toolbar.list.map(function(n){var r;r="ALL"===n?{icon:"xm-iconfont xm-icon-quanxuan",name:"全选",method:function(e){var n=o.optgroup,r=o.disabled,i=e.filter(function(e){return!e[n]}).filter(function(e){return!e[r]});t.props.onReset(G(i,a,o),"sels")}}:"CLEAR"===n?{icon:"xm-iconfont xm-icon-qingkong",name:"清空",method:function(e){t.props.onReset(a.filter(function(e){return e[o.disabled]}),"sels")}}:n;var l=function(e){"mouseenter"===e.type&&(e.target.style.color=i.color),"mouseleave"===e.type&&(e.target.style.color="")};return s("div",{class:"toolbar-tag",onClick:function(){q(r.method)&&r.method(T)},onMouseEnter:l,onMouseLeave:l},e.toolbar.showIcon&&s("i",{class:r.icon}),s("span",null,r.name))}).filter(function(e){return e})),z="hidden"!=e.model.icon;return(g=g.map(function(e){return e[v]?s("div",{class:"xm-group"},s("div",{class:"xm-group-item",onClick:t.groupClick.bind(t,e)},e[m])):function(e){var o=!!a.find(function(t){return t[b]==e[b]}),c=o?{color:i.color,border:"none"}:{borderColor:i.color},u={};!z&&o&&(u.backgroundColor=i.color,e[y]&&(u.backgroundColor="#C2C2C2"));var p=["xm-option",e[y]?" disabled":"",o?" selected":"",z?"show-icon":"hide-icon"].join(" "),f=["xm-option-icon xm-iconfont",l?"xm-icon-danx":"xm-icon-duox"].join(" ");return s("div",{class:p,style:u,value:e[b],onClick:t.optionClick.bind(t,e,o,e[y])},z&&s("i",{class:f,style:c}),s("div",{class:"xm-option-content",dangerouslySetInnerHTML:{__html:r({data:n,item:e,arr:a,name:e[m],value:e[b]})}}))}(e)})).length||g.push(s("div",{class:"xm-select-empty"},c)),s("div",{onClick:this.blockClick},s("div",null,e.toolbar.show&&M,u&&C,s("div",{class:"scroll-body",style:{maxHeight:e.height}},g),e.paging&&O),this.state.loading&&s("div",{class:"loading"},s("span",{class:"loader"})))}}])&&le(n.prototype,o),r&&le(n,r),t}();function pe(e){return(pe="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function fe(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2?arguments[2]:void 0,o=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],r=this.props.on;q(r)&&this.prepare&&o&&r({arr:e,change:t,isAdd:n}),this.setState({sels:e})}},{key:"resetDate",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.setState({data:e})}},{key:"value",value:function(e,t,n){!1!==t&&!0!==t&&(t=this.state.show);var o=this.exchangeValue(e);this.resetSelectValue(o,o,!0,n),this.setState({show:t})}},{key:"exchangeValue",value:function(e){var t=this.props.prop,n=t.optgroup,o=t.value,r=this.state.data.filter(function(e){return!e[n]});return e.map(function(e){return"object"===ge(e)?e[o]:e}).map(function(e){return r.find(function(t){return t[o]==e})}).filter(function(e){return e})}},{key:"append",value:function(e){var t=this.exchangeValue(e);this.resetSelectValue(G(t,this.state.sels,this.props.prop),t,!0)}},{key:"del",value:function(e){var t=this.props.prop.value,n=this.state.sels;(e=this.exchangeValue(e)).forEach(function(e){var o=n.findIndex(function(n){return n[t]===e[t]});-1!=o&&n.splice(o,1)}),this.resetSelectValue(n,e,!1)}},{key:"auto",value:function(e){var t=this,n=this.props.prop.value;e.filter(function(e){return-1!=t.state.sels.findIndex(function(t){return t[n]===e[n]})}).length==e.length?this.del(e):this.append(e)}},{key:"updateBorderColor",value:function(e){this.setState({tmpColor:e})}},{key:"onReset",value:function(e,t){if("data"===t){var n=this.findValue(e);this.resetSelectValue(G(n,this.state.sels,this.props.prop),n,!0),this.setState({data:e})}else"sels"===t?this.resetSelectValue(e,e,!0):"append"===t?this.append(e):"delete"===t?this.del(e):"auto"===t&&this.auto(e)}},{key:"onClick",value:function(e){var t=!this.state.show;if(t){if(this.props.show&&0==this.props.show())return;this.props.onClose(this.props.el)}else{if(this.props.hide&&0==this.props.hide())return;this.bodyView.scroll&&this.bodyView.scroll(0,0)}this.setState({show:t}),e&&e.stopPropagation()}},{key:"componentWillReceiveProps",value:function(e){this.reset(e)}},{key:"componentDidUpdate",value:function(){var e=this.props.direction,t=this.base.getBoundingClientRect();if("auto"===e){this.bodyView.style.display="block",this.bodyView.style.visibility="hidden";var n=this.bodyView.getBoundingClientRect().height;this.bodyView.style.display="",this.bodyView.style.visibility="";var o=document.documentElement.clientHeight-(t.y||t.top)-t.height-20;e=o>n||(t.y||t.top)0&&o.length>=a)return n.updateBorderColor(l.maxColor),void(h&&q(h)&&h(o,e));u?n.resetSelectValue([e],[e],!t):n.resetSelectValue([].concat(ye(o),[e]),[e],!t)}else{var s=o.findIndex(function(t){return t[v]==e[v]});-1!=s&&(o.splice(s,1),n.resetSelectValue(o,[e],!t))}var c;f&&!i&&n.onClick()}},A=s("input",{class:"xm-select-default",name:e.name,value:o.map(function(e){return e[a.value]}).join(",")}),w=xe({},e,{data:this.state.data,sels:o,ck:g,title:o.map(function(e){return e[a.name]}).join(",")}),k=xe({},e,{data:this.state.data,sels:o,ck:g,show:r,onReset:this.onReset.bind(this)}),C=["xm-body",r?"":"dis"].join(" ");return s("xm-select",b,A,s("i",{class:y}),s(W,x),s(re,w),s("div",{class:C,ref:function(e){return n.bodyView=e}},e.content?s(be,{content:e.content}):s(ue,k)))}}])&&Ae(n.prototype,o),r&&Ae(n,r),t}(),Oe={tips:"请选择",empty:"暂无数据",searchTips:"请选择"},je={zn:Oe,en:{tips:"please selected",empty:"no data",searchTips:"please search"}},_e=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"zn",t=je[e]||Oe;return{data:[],content:"",name:"select",size:"medium",initValue:null,tips:t.tips,empty:t.empty,delay:500,searchTips:t.searchTips,filterable:!1,filterMethod:function(e,t,n,o){return!e||-1!=t[o.name].indexOf(e)},remoteSearch:!1,remoteMethod:function(e,t){t([])},direction:"auto",style:{},height:"200px",autoRow:!1,paging:!1,pageSize:10,radio:!1,repeat:!1,clickClose:!1,max:0,maxMethod:function(e,t){},showCount:0,toolbar:{show:!1,showIcon:!0,list:["ALL","CLEAR"]},prop:{name:"name",value:"value",selected:"selected",disabled:"disabled",children:"children",optgroup:"optgroup",click:"click"},theme:{color:"#009688",maxColor:"#e54d42"},model:{label:{type:"block",text:{left:"",right:"",separator:", "},block:{showCount:0,showIcon:!0},count:{template:function(e,t){return"已选中 ".concat(t.length," 项, 共 ").concat(e.length," 项")}}},icon:"show"},show:function(){},hide:function(){},template:function(e){e.item,e.sels;var t=e.name;e.value;return t},on:function(e){e.arr,e.item,e.selected}}};function Re(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Ee(){return(Ee=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{};this.options=J(this.options,t);var n,o=(n=this.options.el,document.querySelector(n));if(o){var r=this.options.data||[];if("function"==typeof r&&(r=r(),this.options.data=r),N(r)){this.options.data=function(e,t){for(var n,o=t.prop,r=(o.disabled,o.children),i=o.optgroup,l=(o.value,[]),a=0;a2&&void 0!==arguments[2]&&arguments[2];if(N(e))return ze[this.options.el].value(e,t,n),this;F("请传入数组结构...")}},{key:"append",value:function(e){if(N(e))return ze[this.options.el].append(e),this;F("请传入数组结构...")}},{key:"delete",value:function(e){if(N(e))return ze[this.options.el].del(e),this;F("请传入数组结构...")}},{key:"warning",value:function(e){return ze[this.options.el].updateBorderColor(e||this.options.theme.maxColor),this}}])&&Ie(t.prototype,n),o&&Ie(t,o),e}();t.a=Le},84:function(e,t,n){"use strict";n.r(t),function(e){var t=n(16),o=(n(86),n(82)),r=(n(87),n(89),{name:t.a,version:t.b,render:function(e){return new o.a(e)}});"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?e.exports=r:"function"==typeof define&&n(91)?define(r):window.layui&&layui.define&&layui.define(function(e){e("xmSelect",r)}),window.xmSelect=r}.call(this,n(85)(e))},85:function(e,t){e.exports=function(e){if(!e.webpackPolyfill){var t=Object.create(e);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},86:function(e,t){Array.prototype.map||(Array.prototype.map=function(e,t){var n,o,r,i=Object(this),l=i.length>>>0;for(t&&(n=t),o=new Array(l),r=0;r>>0;if("function"!=typeof e)throw new TypeError(e+" is not a function");for(arguments.length>1&&(n=t),o=0;o>>0;if("function"!=typeof e)throw new TypeError;for(var o=[],r=arguments[1],i=0;i>>0,r=arguments[1],i=0;i .xm-tips {\n color: #999999;\n padding: 0 10px;\n position: absolute;\n display: flex;\n height: 100%;\n align-items: center;\n}\nxm-select > .xm-icon {\n display: inline-block;\n overflow: hidden;\n position: absolute;\n width: 0;\n height: 0;\n right: 10px;\n top: 50%;\n margin-top: -3px;\n cursor: pointer;\n border: 6px dashed transparent;\n border-top-color: #C2C2C2;\n border-top-style: solid;\n transition: all 0.3s;\n -webkit-transition: all 0.3s;\n}\nxm-select > .xm-icon-expand {\n margin-top: -9px;\n transform: rotate(180deg);\n}\nxm-select > .xm-label.single-row {\n position: absolute;\n top: 0;\n bottom: 0px;\n left: 0px;\n right: 30px;\n overflow: auto hidden;\n}\nxm-select > .xm-label.single-row .scroll {\n overflow-y: hidden;\n}\nxm-select > .xm-label.single-row .label-content {\n flex-wrap: nowrap;\n}\nxm-select > .xm-label.auto-row .label-content {\n flex-wrap: wrap;\n}\nxm-select > .xm-label .scroll .label-content {\n display: flex;\n padding: 3px 30px 3px 10px;\n}\nxm-select > .xm-label .xm-label-block {\n display: flex;\n position: relative;\n padding: 0px 5px;\n margin: 2px 5px 2px 0;\n border-radius: 3px;\n align-items: baseline;\n color: #FFF;\n}\nxm-select > .xm-label .xm-label-block > span {\n display: flex;\n color: #FFF;\n white-space: nowrap;\n}\nxm-select > .xm-label .xm-label-block > i {\n color: #FFF;\n margin-left: 8px;\n font-size: 12px;\n cursor: pointer;\n display: flex;\n}\nxm-select > .xm-label .xm-label-block.disabled {\n background-color: #C2C2C2 !important;\n cursor: no-drop !important;\n}\nxm-select > .xm-label .xm-label-block.disabled > i {\n cursor: no-drop !important;\n}\nxm-select > .xm-body {\n position: absolute;\n left: 0;\n top: 42px;\n padding: 5px 0;\n z-index: 999;\n width: 100%;\n border: 1px solid #E6E6E6;\n background-color: #fff;\n border-radius: 2px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);\n animation-name: xm-upbit;\n animation-duration: 0.3s;\n animation-fill-mode: both;\n}\nxm-select > .xm-body .scroll-body {\n overflow: auto;\n}\nxm-select > .xm-body .scroll-body::-webkit-scrollbar {\n width: 8px;\n}\nxm-select > .xm-body .scroll-body::-webkit-scrollbar-track {\n -webkit-border-radius: 2em;\n -moz-border-radius: 2em;\n -ms-border-radius: 2em;\n border-radius: 2em;\n background-color: #FFF;\n}\nxm-select > .xm-body .scroll-body::-webkit-scrollbar-thumb {\n -webkit-border-radius: 2em;\n -moz-border-radius: 2em;\n -ms-border-radius: 2em;\n border-radius: 2em;\n background-color: #C2C2C2;\n}\nxm-select > .xm-body.up {\n top: auto;\n bottom: 42px;\n}\nxm-select > .xm-body .xm-group {\n cursor: default;\n}\nxm-select > .xm-body .xm-group-item {\n display: inline-block;\n cursor: pointer;\n padding: 0 10px;\n color: #999;\n font-size: 12px;\n}\nxm-select > .xm-body .xm-option {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0 10px;\n cursor: pointer;\n}\nxm-select > .xm-body .xm-option:hover {\n background-color: #f2f2f2;\n}\nxm-select > .xm-body .xm-option-icon {\n color: transparent;\n display: flex;\n border: 1px solid #E6E6E6;\n border-radius: 3px;\n justify-content: center;\n align-items: center;\n}\nxm-select > .xm-body .xm-option-icon.xm-icon-danx {\n border-radius: 100%;\n}\nxm-select > .xm-body .xm-option-content {\n display: flex;\n position: relative;\n padding-left: 15px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n color: #666;\n width: calc(100% - 20px);\n}\nxm-select > .xm-body .xm-option.hide-icon .xm-option-content {\n padding-left: 0;\n}\nxm-select > .xm-body .xm-option.selected.hide-icon .xm-option-content {\n color: #FFF !important;\n}\nxm-select > .xm-body .xm-select-empty {\n text-align: center;\n color: #999;\n}\nxm-select > .xm-body .disabled {\n cursor: no-drop;\n}\nxm-select > .xm-body .disabled:hover {\n background-color: #FFF;\n}\nxm-select > .xm-body .disabled .xm-option-icon {\n border-color: #C2C2C2 !important;\n}\nxm-select > .xm-body .disabled .xm-option-content {\n color: #C2C2C2 !important;\n}\nxm-select > .xm-body .disabled.selected > .xm-option-icon {\n color: #C2C2C2 !important;\n}\nxm-select > .xm-body .xm-search {\n background-color: #FFF !important;\n position: relative;\n padding: 0 10px;\n margin-bottom: 5px;\n cursor: pointer;\n}\nxm-select > .xm-body .xm-search > i {\n position: absolute;\n color: #666;\n}\nxm-select > .xm-body .xm-search-input {\n border: none;\n border-bottom: 1px solid #E6E6E6;\n padding-left: 27px;\n cursor: text;\n}\nxm-select > .xm-body .xm-paging {\n padding: 0 10px;\n display: flex;\n margin-top: 5px;\n}\nxm-select > .xm-body .xm-paging > span:first-child {\n border-radius: 2px 0 0 2px;\n}\nxm-select > .xm-body .xm-paging > span:last-child {\n border-radius: 0 2px 2px 0;\n}\nxm-select > .xm-body .xm-paging > span {\n display: flex;\n flex: auto;\n justify-content: center;\n vertical-align: middle;\n padding: 0 15px;\n margin: 0 -1px 0 0;\n background-color: #fff;\n color: #333;\n font-size: 12px;\n border: 1px solid #e2e2e2;\n}\nxm-select > .xm-body .xm-toolbar {\n padding: 0 10px;\n display: flex;\n margin: -3px 0;\n cursor: default;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag {\n cursor: pointer;\n display: flex;\n margin-right: 20px;\n color: #666;\n align-items: baseline;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag:hover {\n opacity: 0.8;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag:active {\n opacity: 1;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag > i {\n margin-right: 2px;\n font-size: 14px;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag:last-child {\n margin-right: 0;\n}\nxm-select > .xm-body .xm-body-custom {\n line-height: initial;\n cursor: default;\n}\nxm-select > .xm-body .xm-body-custom * {\n box-sizing: initial;\n}\nxm-select .xm-input {\n cursor: pointer;\n border-radius: 2px;\n border-width: 1px;\n border-style: solid;\n border-color: #E6E6E6;\n display: block;\n width: 100%;\n box-sizing: border-box;\n background-color: #FFF;\n line-height: 1.3;\n padding-left: 10px;\n outline: 0;\n}\nxm-select .dis {\n display: none;\n}\nxm-select .loading {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.6);\n display: flex;\n align-items: center;\n justify-content: center;\n}\nxm-select .loading .loader {\n border: 0.2em dotted currentcolor;\n border-radius: 50%;\n -webkit-animation: 1s loader linear infinite;\n animation: 1s loader linear infinite;\n display: inline-block;\n width: 1em;\n height: 1em;\n color: inherit;\n vertical-align: middle;\n pointer-events: none;\n}\nxm-select .xm-select-default {\n display: none !important;\n}\nxm-select[size='large'] {\n min-height: 40px;\n line-height: 40px;\n}\nxm-select[size='large'] .xm-input {\n height: 40px;\n}\nxm-select[size='large'] .xm-label .scroll .label-content {\n line-height: 34px;\n}\nxm-select[size='large'] .xm-label .xm-label-block {\n height: 30px;\n line-height: 30px;\n}\nxm-select[size='large'] .xm-body .xm-option .xm-option-icon {\n height: 20px;\n width: 20px;\n font-size: 20px;\n}\nxm-select[size='large'] .xm-paging > span {\n height: 34px;\n line-height: 34px;\n}\nxm-select {\n min-height: 36px;\n line-height: 36px;\n}\nxm-select .xm-input {\n height: 36px;\n}\nxm-select .xm-label .scroll .label-content {\n line-height: 30px;\n}\nxm-select .xm-label .xm-label-block {\n height: 26px;\n line-height: 26px;\n}\nxm-select .xm-body .xm-option .xm-option-icon {\n height: 18px;\n width: 18px;\n font-size: 18px;\n}\nxm-select .xm-paging > span {\n height: 30px;\n line-height: 30px;\n}\nxm-select[size='small'] {\n min-height: 32px;\n line-height: 32px;\n}\nxm-select[size='small'] .xm-input {\n height: 32px;\n}\nxm-select[size='small'] .xm-label .scroll .label-content {\n line-height: 26px;\n}\nxm-select[size='small'] .xm-label .xm-label-block {\n height: 22px;\n line-height: 22px;\n}\nxm-select[size='small'] .xm-body .xm-option .xm-option-icon {\n height: 16px;\n width: 16px;\n font-size: 16px;\n}\nxm-select[size='small'] .xm-paging > span {\n height: 26px;\n line-height: 26px;\n}\nxm-select[size='mini'] {\n min-height: 28px;\n line-height: 28px;\n}\nxm-select[size='mini'] .xm-input {\n height: 28px;\n}\nxm-select[size='mini'] .xm-label .scroll .label-content {\n line-height: 22px;\n}\nxm-select[size='mini'] .xm-label .xm-label-block {\n height: 18px;\n line-height: 18px;\n}\nxm-select[size='mini'] .xm-body .xm-option .xm-option-icon {\n height: 14px;\n width: 14px;\n font-size: 14px;\n}\nxm-select[size='mini'] .xm-paging > span {\n height: 22px;\n line-height: 22px;\n}\n.layui-form-pane xm-select {\n margin: -1px -1px -1px 0;\n}\n",""])},89:function(e,t,n){var o=n(90);"string"==typeof o&&(o=[[e.i,o,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(3)(o,r);o.locals&&(e.exports=o.locals)},90:function(e,t,n){(e.exports=n(2)(!1)).push([e.i,'/* 阿里巴巴矢量图标库 */\n@font-face {\n font-family: "xm-iconfont";\n src: url(\'//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831\');\n /* IE9*/\n src: url(\'//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */ url(\'data:application/x-font-woff;charset=utf-8;base64,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 
